CSS コード最適化のための 12 のヒント_エクスペリエンス交換

1. ID ルール
2. クラス ルール
3. タグ ルール
4. 一般ルール
効率性に関する共通の理解は、Steve Souders が 2013 年に出版した「High-Performance Website Construction」から来ています。 2009 「Advanced Guide」から始まり、この本にはさらに詳しく記載されていますが、ここで完全な参考リストを参照することもできます。また、Google の「効率的な CSS セレクターのベスト プラクティス」で詳細を参照することもできます。
この記事では、高パフォーマンスの CSS を作成するために私が使用しているいくつかの簡単な例とガイドラインを共有したいと思います。これらは、MDN によって作成された効率的な CSS ガイドに触発されており、同様の形式に従っています。

1. 過度の拘束を避ける

原則として、不必要な制約を追加しないでください。

コードをコピー コードは次のとおりです。

// おっと
ul# someid {. .}
.menu#otherid{..}

// OK
#someid {..}
#otherid {..}

2. 子孫セレクターは最悪です

パフォーマンスが低いだけでなく、コードも非常に脆弱で、HTML コードと CSS コードは非常に結合しています。 HTML コードの構造が変更されると、CSS も変更する必要があります。これは大変なことですが、特に大企業では、HTML と CSS を作成する人が同じ人ではないことがよくあります。

コードをコピー コードは次のとおりです。

// 最悪です
html div tr td {..}

3. チェーン (交差) セレクターを避ける

これは、過剰な制約の状況と似ています。より賢明なアプローチは、単純に新しい CSS クラス セレクターを作成することです。

コードをコピー コードは次のとおりです:

// おっと
.menu .left. icon {..}

// OK
.menu-left-icon {..}

4. KISS 原則に従う

次の DOM があると想像してください。

コードをコピー コードは次のとおりです。

• Twitter

>
• Facebook


• Dribbbletphpcn
  

対応するルールは次のとおりです...

コードをコピー コードは次のとおりです:

/ / 悪い
#navigator li a {..}

// 良い
#navigator {..}

5. 複合 (コンパクト) 構文を使用する

可能な限り複合構文を使用します。

コードをコピー コードは次のとおりです:

// おっと
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
背景: #000;
背景-画像: url (../imgs/キャロット.png);
背景-位置: ボトム;
背景-リピート: リピート-x;
}

// わかりました
.someclass {
パディング: 20px 10px 20px 10px;
背景: #000 url(../imgs/キャロット.png)repeat-xbottom;
}

6. 不要な名前空間を避ける

コードをコピー コードは次のとおりです。

// 悪い
.someclass テーブル tr.otherclass td.somerule {..}

// 良い
.someclass .otherclass td.somerule { . .}

7. 不必要な繰り返しを避ける

繰り返しのルールを可能な限り結合します。

コードをコピー コードは次のとおりです。

// おっと

.someclass {
カラー: 赤;
背景: ブルー;
フォントサイズ: 15px;
}

.otherclass {
カラー: 赤;
背景: 青 ;
font-size: 15px;
}

// OK

.someclass, .otherclass {
カラー: 赤;
背景: blue;
font-size: 15px;
}

8. ルールを可能な限り合理化する
上記のルールに基づいて、さらに、異なるカテゴリの繰り返しルールをマージできます。

コードをコピー コードは次のとおりです。

// おっと
.someclass {
色: 赤;
背景: 青;
高さ: 150px;
幅: 150px;
font-size: 16px;
}

.otherclass {
カラー: 赤;
背景: 青;
高さ: 150px;
幅: 150px;
font-size: 8px;
}

// OK
.someclass, .otherclass {
カラー: 赤;
背景: 青; 高さ: 150px;
幅: 150px;
}

.someclass {
font-size: 16px;
}

.otherclass {
font-size: 8px;
}

9. 不明確な命名規則を避ける
セマンティクスを表す名前を使用することが最善です。適切な CSS クラス名は、それがどのようなものであるかではなく、それが何であるかを説明する必要があります。
10. !重要な要素を避ける
実際には、他の高品質セレクターも使用できるはずです。

11. 標準的な申告順序に従います

CSS プロパティを並べ替える一般的な方法はいくつかありますが、以下は私が従う一般的な方法です。

コードをコピー コードは次のとおりです。

.someclass {
/*位置決め */
/* ディスプレイおよびボックス モデル */
/* 背景およびタイポグラフィ スタイル */
/* トランジション */
/* その他 */
}

12. 整理されたコード形式
コードの読みやすさは、保守のしやすさに直接比例します。以下は私が従うフォーマット方法です。

コードをコピー コードは次のとおりです:

// おっと
.someclass -a, .someclass-b, .someclass-c, .someclass-d {
...
}

// わかりました
.someclass-a,
.someclass -b ,
.someclass-c,
.someclass-d {
...
}

// 良い実践例
.someclass {
背景-画像 :
線形グラデーション(#000, #ccc),
線形グラデーション(#ccc, #ddd); 1px 1px #ddd インセット;
}

明らかに、これらは、より効率的で保守しやすくするために、私が独自の CSS で従おうとしているルールのほんの一部にすぎません。さらに詳しく読みたい場合は、MDN の「効率的な CSS の作成ガイド」と Google の「ブラウザ レンダリングの最適化ガイド」を読むことをお勧めします。