高品質なコードを書く Web フロントエンド開発実践書の抜粋

（P4）
Web 標準は一連の標準で構成されています。中心となる概念は、Web ページの構造、スタイル、動作を分離することであるため、構造標準、スタイル標準、動作標準の 3 つの部分に分けることができます。
スタイル標準 - XML 標準、XHTML 標準、HTML 標準。
スタイル標準 - CSS 標準。
動作標準 - DOM 標準および ECMAscript 標準。

(P23)CSS レイアウトは、一般的に Div + CSS レイアウト、または (X)HTML + CSS レイアウトと呼ばれます。基本的な考え方は、CSS を使用して、位置、サイズ、色など、Web ページ内の要素のスタイルを制御することです。

（P26）
CSS レイアウトは Web 標準の一部にすぎません。 HTML、CSS、Javascript の 3 つの要素のうち、HTML が最も重要であり、構造が中心となり、スタイルは構造を変更するために使用されます。

まず HTML を決定し、セマンティック標準を決定してから、適切な CSS を選択します。

(P27) ブラウザはタグのセマンティクスに基づいてデフォルトのスタイルを提供します。

(P29) Web Developer —— Webページデバッグプラグイン

(P43) 意味が明確でなく、<P> または <div> のいずれかを使用できる場所では、<P> を使用するようにしてください。<P> はデフォルトで上下にスペースがあり、スタイルを削除すると読みやすくなり、特殊な端末との互換性に役立ちます。

（P46）
DTD 宣言を省略すると、Firefox は標準スタイルに従って Web ページを解析しますが、IE (IE6、IE7、IE8 を含む) は Quirks モードをトリガーします。

CSS を整理する方法 - base.css + common.css + page.css

(P58) モジュールには他のモジュールと同じパーツを含めないでください。共通パーツがある場合は、それを抽出して独立したモジュールに分割する必要があります。

(P60) 再利用性を高めるために、モジュールはできる限りシンプルにし、その数をできるだけ少なくする必要があります。

(P71) HTML 標準の class 属性は id 属性とは異なります。id は 1 つしか持てませんが、class はスペースで区切って複数持つことができます。

(P81) モジュールの上部と下部の余白が特に安定しているかどうかわからない場合は、モジュールクラスに書き込むのではなく、クラスの組み合わせを使用して、境界の上部と下部の余白に別々のアトミッククラスを割り当てることをお勧めします。

(P81) 重みのルールは次のとおりです。HTML タグの重みは 1、クラスの重みは 10、ID の重みは 100 です。

(P82) CSS セレクターの重みが同じ場合、スタイルは近接原則に従います。最後に定義されたセレクターのスタイルが使用されます。「近接原則」は、クラス名の定義順序ではなく、セレクターの定義順序を指します。

(P84) スタイルを簡単に上書きして保守性を向上させるには、CSS セレクタの重みを可能な限り低くする必要があります。

(P85) 使用するサブセレクタが少ないほど、追加する必要があるクラスの数が多くなります。

(P87) CSS スプライト「イメージ反転テクノロジー」 - 複数の画像を 1 つに結合し、background-position プロパティを使用して必要な部分を表示します。

(P88) CSS Sprite を使用するかどうかは主にウェブサイトのトラフィックによって決まります。

(P89) 一般的には、クラスをできるだけ使用し、ID をあまり使用しないことが推奨されます。

（P93）
CSSハック
1. IE条件付きコメント方式 <!-- [if IE]> ...... <![endif]>
2. セレクタプレフィックス方式 *html *+html
3. スタイル属性プレフィックス方式 "_" "*"

(P94) <a> タグの 4 つの状態は、愛憎の原則に従って分類されます - L(link)ov(Visible)e、H(Hover)a(Active)te;

（P95）
ブロックレベル要素: div、p、form、ul、ol、li

インライン要素: span、strong、em

ブロックレベル要素は 1 行を占め、デフォルトではその幅は親要素の幅に自動的に合わせられます。

インライン要素は 1 行を占有しません。隣接するインライン要素は、1 行がいっぱいになるまで同じ行に配置され、その後別の行に折り返されます。行の幅は、要素の内容によって変わります。

（P95）
ブロックレベル要素は幅と高さの属性を設定できます。
インライン要素の幅と高さの属性を設定することは無効です。

(P96) ブロックレベル要素では、マージン属性とパディング属性を設定できます。インライン要素の場合、水平方向のマージンとパディングのみがマージン効果を生み出します。

(P97) ブロックレベル要素とインライン要素の CSS 関連プロパティは display です。ブロックレベル要素は display: block に対応し、インライン要素は display: inline に対応します。 display プロパティを変更することで、ブロックレベル要素とインライン要素を切り替えることができます。

（P103）
position: relate と position: absolute はどちらも、ドキュメント内の要素の位置を変更できます。 position: relative および position: absolute を設定すると、要素の left、top、right、bottom、および z-index プロパティが有効になります (これらのプロパティはデフォルトでは有効にならず、設定しても効果はありません)。

デフォルトでは、すべての要素の z-index は 0 になります。

position: relative または position: absolute を設定すると、要素は「フロート」になります。

position: relative — 位置を z-index: 0 に維持します。

position: absolute - ドキュメントフローから完全に外れ、z-index: 0 レイヤーのプレースホルダーではなくなります。left、top、right、bottom の値は、position: relative または position: absolute が設定されている最も近い祖先要素を基準とします。祖先要素のいずれにも position: relativetive または position: absolute が設定されていない場合は、body 要素を基準とします。

（P104）
float 要素属性は、要素を別の z-index レイヤーに「浮かせる」ことはありません。要素は z-index: 0 レイヤーに配置されたままです。float は、left、top、right、bottom 属性を通じて要素の座標を正確に制御することはできません。float: left と float: right を通じて、同じレイヤー内の要素の「左浮動」と「右浮動」のみを制御できます。 Flaot は通常のドキュメントフローを変更し、周囲の要素に影響を与えます。

position: absolute、float: left、float: right のいずれかが設定されている場合、要素は display: inline-block モードで表示されます。長さと幅を設定できますが、デフォルトの幅では親要素が埋められません。display: inline または display: block が明示的に設定されていても、無効になります。

position: relative は暗黙的に表示タイプを変更しないことに注意してください。

（P104）
インライン要素を水平方向に中央揃えにする — text-align: center
ブロックレベル要素を水平方向に中央揃えする（幅を決定する） - margin-left: auto および margin-right: auto

（P111）
CSS には垂直方向の中央揃えのための vertical-align プロパティがありますが、この vertial-align プロパティは親要素が <td> または <th> の場合にのみ有効になります。

デフォルトでは、<td> タグは暗黙的に vertical-align 値を middle に設定します。

(P114) 注意: メインのコンテンツはサイドバーよりも重要です。サイドバーの左側または右側のどちらにあっても、メインの HTML タグはサイドバーより先に読み込む必要があります。

(P136) スクリプトを匿名関数でラップすると、グローバル変数を効果的に制御し、潜在的な競合を回避できます。

（P147）
必要なコメントを追加するとコードの保守性が大幅に向上し、チームワークにとってさらに重要になります。

JS が競合を引き起こさないようにするには、グローバル変数の増殖を避け、名前空間を適切に使用し、コードに必要なコメントを追加する必要があります。

(P153) window オブジェクトは、Web ページ内のすべての要素が読み込まれた後に onload イベントをトリガーします。

(P153) DOMReady は、ページ内のすべての DOM ノードが生成されたかどうかのみを判断します。子ノードのコンテンツがロードされたかどうかは考慮しません。 DOMReady は window.onload よりも速くトリガーされます。

(P159) CSS はページヘッダーに配置され、Javascript はページフッターに配置されます。

(P174)attachEventはIEでサポートされているメソッドですが、addEventListenerはFirefoxでサポートされているメソッドです。attachEventメソッドとaddEventListenerメソッドは、リスナー処理関数の上書きではなく重ね合わせをサポートしています。

(P185) 多くのオープンソースの JavaScript ライブラリは、強力なベースレイヤーと共通レイヤーを提供します。最も一般的な JavaScript ライブラリには、jQuery と YUI があります。

（P186）
jQuery 自体は、jQuery コアファイルと jQuery UI ファイルの 2 つの部分に分かれています。 jQuery UI ファイルは jQuery コアファイルに依存します。

jQuery コアファイルは基本レイヤー関数といくつかの共通レイヤー関数を提供し、jQuery UI ファイルは共通レイヤー関数を提供します。

（P194）
同じ ID はページ内で 1 回しか出現できないため、「類似の機能」を持つ DOM ノードのグループを取得するのには適していません。

タグ名を使用して DOM ノードを取得すると、プログラムが HTML 構造と密接に結合しすぎてしまいます。

(P196) id は同じページ上で 1 回しか出現できないため、プログラムを複数の場所で再利用する必要がある場合は、DOM ノードを取得するための Javascript のフックとして id を使用しないでください。

(P198) コンポーネントは、各コンポーネントの独立性を維持するためにルートノードを指定する必要があります。

(P205) 関数内の要素が非常に不安定な場合は、その要素を関数から分離してパラメータとして渡すことで、不安定な要素を関数から切り離すことができます。

（P223）
オブジェクト指向の完全な英語名は Object Oriented で、略称は OO です。 OO には、実際には OOA (オブジェクト指向分析)、OOD (オブジェクト指向設計)、および OOP (オブジェクト指向プログラミング) が含まれます。オブジェクト指向構文は OOP にのみ対応し、OO の一部にすぎません。

OOA と OOD は特定の言語とは関係のないオブジェクト指向プログラミングの考え方ですが、OOP は選択された言語に関連するオブジェクト指向プログラミングツールです。

OOA と OOD は特定の要件言語から独立しており、通常は言語間で簡単に再利用できます。

(P224) マクロ的な観点から見ると、プログラムの品質を決定するのは OOP ではなく、OOA と OOD です。

(P225) Javascript の関数は、通常の関数としてもクラスとしても使用できます。クラスとして機能する場合、コンストラクターの役割も担います。

(P228) this xxx で定義されたプロパティはパブリックですが、var xxx で定義されたプロパティはプライベートです。

(P230) プロトタイプ内の動作はパブリックである必要があり、プライベートプロパティにアクセスすることはできません。

(P231) コンストラクタ内に配置されたプライベートな動作は、存在の真の性質を実現します。

(P253) クラスコンストラクタ内またはプロトタイプ内のいずれの場合でも、this はインスタンス化されたオブジェクトを参照します。

(P239) 関数として、その this はウィンドウオブジェクトを参照しますが、クラスコンストラクターとして、その this はインスタンス化されたオブジェクトを参照します。

(P259) 共通属性の場合、node.xxx を使用して読み取ります。カスタム属性の場合、node.getAttribute("xxx") を使用して読み取ります。

<<: Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

>>: CSSインジェクションの知識の要約