効率的な CSS セレクターの作成方法-CSSチュートリアル-php.cn

効率的な CSS セレクターの作成方法

小云云

リリース： 2017-11-30 10:43:12

オリジナル

1661 人が閲覧しました

CSS セレクターにはさまざまな種類があることは誰もが知っていますが、CSS ページを作成するとき、多くの人はそれが楽しくて簡単だと思うかもしれませんが、徐々に、それはルールなしで記述しているだけであることがわかります。 , 実際の開発では不要な作業や繰り返し作業が発生する可能性があり、CSSは効率的ではありません。そこでこの記事では、主に次の点で効率的で再利用可能な CSS を作成する方法を説明します。

まず、CSS コードの短い部分を見てください:

#menus > li { font-size: 14px; }

ログイン後にコピー

おそらく、ブラウザが左から右に上記のルールに一致すると推測します。ブラウザが最初にメニューの ID を持つ唯一の要素を見つけたと想像します。次に、それにスタイルを適用します。直接の子要素 li 要素について。これはかなり効率的だと思われます。

ただし、CSS セレクターは実際には右から左に一致します。したがって、上記のルールは効率的ではありません。ブラウザはページ上の各 li 要素を走査し、その親要素の ID が正しいかどうかを判断する必要があります。メニュー。

スタイルシステムは、右端のセレクターから左に向かってルールの一致を開始します。現在のセレクターの左側に他のセレクターがある限り、スタイルシステムは、ルールに一致する要素が見つかるか、不一致により終了するまで、左に移動し続けます。

効率的な CSS セレクターを記述するための一般的なルールは次のとおりです:

1. ワイルドカードルールの使用を避ける

従来の意味でのワイルドカードセレクターに加えて、隣接する兄弟セレクター、子セレクター、および子孫セレクターを使用します。ワイルドカードルールに基づいて分類されており、ID、クラス、タグセレクターのみを使用することをお勧めします。

2. ID セレクターを制限しないでください。

指定された ID はページ上の 1 つの要素にのみ対応できるため、追加の修飾子を追加する必要はありません。たとえば、div#header は不要なので、#header に簡略化する必要があります。

3. クラスセレクターを制限しない

クラスセレクターを特定のラベルで制限せず、実際の状況に応じてクラス名を拡張します。たとえば、li.chapter を .li-chapter に変更するか、さらに良いのは .list-chapter に変更します。

4. ルールをできるだけ具体的にします

ol li a のような長いセレクターを作成しないでください。 .list-anchor のようなクラスを作成して、適切な要素に追加することをお勧めします。

5. 子孫セレクターの使用を避ける

通常、子孫セレクターの処理コストは最も高くなりますが、サブセレクターを使用すると望ましい結果が得られ、より効率的になります。

6. タグサブセレクターの使用を避ける

#menus > li > a のようなタグベースのサブセレクターがある場合は、.menus-item などのクラスを使用する必要があります。。

7. サブセレクターのすべての使用法を疑問視する

サブセレクターが使用されているすべての場所を確認し、可能な限り具体的なクラスに置き換えます。

8. 継承に依存する

どの属性が継承できるかを理解し、これらの属性に対するルールを繰り返し指定することは避けてください。たとえば、リストの各要素ではなくリスト要素に list-style-image を指定します。各要素の継承可能なプロパティについては、継承プロパティのリストを参照してください。

上記の内容は、効率的な CSS セレクターの作成方法に関するチュートリアルであり、皆様のお役に立てれば幸いです。