CSS セレクターを効率的に使用する方法

今回は、CSSセレクターを効率的に使用する方法と、CSSセレクターを効率的に使用するための注意事項について説明します。実際のケースを見てみましょう。

初めて CSS を書いたとき、それは非常にシンプルで、できるだけワイルドに書くことができると思いました。その後、ルールを決めずに書いても結果は得られるものの、実際の開発では無駄な作業や繰り返し作業が増える可能性があり、CSS は効率的ではないことが徐々にわかってきました。したがって、その後の開発では、可能な限り効率的で再利用可能な CSS を作成するために、意図的に特定のルールに従っていました。要約すると、主な点は次のとおりです。

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

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

ブラウザが上記のルールを左から右に照合すると推測できます。ブラウザが最初にメニューの ID を持つ唯一の要素を見つけると想像します。を指定し、直接の子要素 ​​li 要素に適用されるスタイルを変更します。これはかなり効率的だと思われます。

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

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

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

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

従来の意味でのワイルドカード セレクターに加えて、隣接する兄弟セレクター、サブ セレクター、子孫セレクションを組み合わせます。および属性セレクターはすべてワイルドカード ルールに基づいて分類されるため、ID、クラス、ラベル セレクターのみを使用することをお勧めします。

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

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

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

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

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

ol li a のような長いセレクターを記述しようとせず、 .list-anchor のようなクラスを作成し、それを適切な要素に追加することをお勧めします。

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

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

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

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

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

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

8. 継承に頼る

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3 で大きな縞模様の背景を作成する

CSS3 で半円弧を作成する

以上がCSS セレクターを効率的に使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。