より適切な CSS_html/css_WEB-ITnose の記述

CSS コードを作成すると、ページのレンダリング速度を向上させることができます。基本的に、エンジンによって最速で解析できるルールはありません。 MDN は、CSS セレクターを以下に示すように 4 つの主要なカテゴリに分割し、パフォーマンスは順番に低下します。

1. ID ルール
2. クラス ルール
3. タグ ルール
4. 一般ルール

効率性に関する共通の理解は、2009 年に Steve Souders によって出版された「高パフォーマンス Web サイト構築の上級ガイド」から始まりました。リストは非常に詳細です。参考文献の完全なリストはここでご覧いただけます。詳細については、Google の効率的な CSS セレクターのベスト プラクティスを確認することもできます。

この記事では、高パフォーマンス CSS を作成する際に使用するいくつかの簡単な例とガイドラインを共有したいと思います。効率的な CSS を作成するための MDN のガイドに触発されており、同様の形式に従っています。

過剰な制約を避ける

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

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

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

// 糟糕ul#someid {..}.menu#otherid{..}// 好的#someid {..}#otherid {..}

セレクターの連鎖 (交差) を避ける

これは過剰制約の状況と似ており、単純に新しい CSS クラス セレクターを作成する方が賢明です。

// 烂透了html div tr td {..}

KISS 原則に従います

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

// 糟糕.menu.left.icon {..}// 好的.menu-left-icon {..}

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

<ul id="navigator">    <li><a href="#" class="twitter">Twitter</a></li>    <li><a href="#" class="facebook">Facebook</a></li>    <li><a href="#" class="dribble">Dribbble</a></li></ul>

複合構文を使用します

s を使用します可能な限り構文を記述します。

// 糟糕#navigator li a {..}// 好的#navigator {..}

不要な名前空間を避ける

// 糟糕.someclass { padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; background: #000; background-image: url(../imgs/carrot.png); background-position: bottom; background-repeat: repeat-x;}// 好的.someclass { padding: 20px 10px 20px 10px; background: #000 url(../imgs/carrot.png) repeat-x bottom;}

不必要な重複を避ける

重複するルールを可能な限り結合します。

// 糟糕.someclass table tr.otherclass td.somerule {..}//好的.someclass .otherclass td.somerule {..}

ルールを可能な限り合理化します

上記のルールに基づいて、異なるカテゴリで繰り返されるルールをさらにマージできます。

// 糟糕.someclass { color: red; background: blue; font-size: 15px;}.otherclass { color: red; background: blue; font-size: 15px;}// 好的.someclass, .otherclass { color: red; background: blue; font-size: 15px;}

曖昧な命名規則は避けてください

意味的な名前を使用することをお勧めします。適切な CSS クラス名は、それがどのようなものであるかではなく、それが何であるかを説明する必要があります。

!重要な要素

は避けてください

実際には、他の高品質セレクターも使用できるはずです。

標準の宣言順序に従います

CSS プロパティの順序を調整する一般的な方法がいくつかありますが、以下は私が従う一般的な方法です。

// 糟糕.someclass { color: red; background: blue; height: 150px; width: 150px; font-size: 16px;}.otherclass { color: red; background: blue; height: 150px; width: 150px; font-size: 8px;}// 好的.someclass, .otherclass { color: red; background: blue; height: 150px; width: 150px;}.someclass { font-size: 16px;}.otherclass { font-size: 8px;}

整理されたコード形式

コードの可読性と保守性は正比例します。以下は私が従うフォーマット方法です。

.someclass { /* Positioning */ /* Display & Box Model */ /* Background and typography styles */ /* Transitions */ /* Other */}

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