CSSスタイルの記述順序と命名規則と注意事項

書き順の重要性

ブラウザのリフローを減らし、ブラウザのDOMレンダリングパフォーマンスを向上させる

①: HTMLを解析してDOMツリーを構築し、CSSを解析してCSSツリーを構築します。HTMLをツリー状のデータ構造に解析し、CSSをツリー状のデータ構造に解析します。

②:レンダリングツリーを構築します。DOMツリーとCSSツリーをマージした後に形成されるレンダリングツリーです。

③:レイアウトレンダリングツリー: レンダリングツリーにより、ブラウザーは Web ページ内のノード、各ノードの CSS 定義、およびそれらの従属関係をすでに把握しており、画面上の各ノードの位置を計算します。

④:レンダリングツリーを描画：計算されたルールに従って、コンテンツがグラフィックカードを通じて画面に描画されます。

ブラウザ画面に表示する CSS スタイルの解析は、手順②③④で行われます。ブラウザは CSS スタイルを取得した後すぐに解析を開始するのではなく、CSS スタイルの記述順序に従って DOM ツリーの構造に応じてレンダリングスタイルを分配し、手順②を完了してから、各ツリーノードの CSS スタイルのトラバースを開始して解析していることがわかります。このとき、CSS スタイルのトラバース順序は、以前の記述順序に完全に従います。

優先順位第一 - ポジショニング属性:

{
      display は、要素が生成するボックスの種類を指定します。
      position 配置は要素の配置タイプを指定します。
      float ボックスをフロートさせるかどうかを指定します。
      左     
      トップ  
      右  
      底   
      overflow は、コンテンツが要素のボックスから溢れた場合に何が起こるかを指定します。
      clear は、z-index セット要素の積み重ね順序をクリアします。
      コンテンツリスト形式  
          可視性 可視性/表示}

優先度2 - 独自の属性:

{
     幅
     身長
     国境
     パディング    
     マージン   
     背景
}

優先度3 - テキストスタイル:

{
        フォントファミリー   
        フォントサイズ   
        font-style テキストのフォント スタイルを指定します。
        フォントの太さ   
        font-variant テキストを小文字フォントの色で表示するかどうかを指定します   
   }

優先度4 - テキスト属性:

{
        text-align はテキストの水平方向の配置を指定します。
        vertical-align 要素の垂直方向の配置を設定します。
        text-wrap はテキストの改行ルールを指定します。
        text-transform はテキストの大文字と小文字を制御します。
        text-indent は、テキスト ブロックの最初の行のインデントを指定します。
        text-decoration テキストに追加する装飾を指定します。
        letter-spacing は文字間隔を設定します。
        word-spacing は単語間隔を設定します。
        white-space 要素内の空白の処理方法を指定します。
        text-overflow は、テキストが含まれる要素からテキストが溢れた場合に何が起こるかを指定します。
   }

優先度 5 - CC3 で追加された新しい属性:

{  
         box-shadow はボックスに 1 つ以上の影を追加します。
         カーソル 表示されるカーソルの種類 (形状) を指定します。
         境界線の半径  
         背景:線形グラデーション
         transform... 要素に 2D または 3D 変換を適用します。
   }

CSS コードの命名規則

すべてのブラウザでの互換性を確保するために、セレクター名は文字で始まる必要があります。
1 文字のクラスセレクターは使用できません。
モジュールがブラウザによってスパムとしてフィルタリングされるのを防ぐため、モジュールに ad、adv、aver、advertising などの英語の単語を使用した名前を付けることはできません。これはどのファイルの命名でも同様です。
クラス名ではアンダースコア '_' は使用できません。すべて小文字を使用してください。ハイフン '-' を使用してください。
キャメルケースのクラス名を許可しない
名前は明らかだ

CSS コードノート

大規模な汚染を引き起こすため、意味のないタグをセレクターとして使用しないでください。
CSS のカラープロパティ値の省略形
0であるCSSプロパティ値を削除する
不要なCSSスタイルを削除する
単一のCSSセレクタまたは新しい宣言の場合は新しい行を開始します
過度な省略は避けてください。.ico はアイコンであることを示すのに十分ですが、.i は何も意味しません。
意味のある名前を使い、抽象的な名前ではなく構造的または目的に関連した名前を使う

要約する

CSS スタイルの記述順序と命名規則に関するこの記事はこれで終わりです。より関連性の高い CSS 記述順序コマンド標準については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: nginx のロードバランシングとリバースプロキシの説明

>>: ウェブページのカラーマッチングにおけるオーバーラップとソフトカラーマッチングの手法を詳しく説明