負荷速度を向上させるために複数のCSSセレクタをグループ化する
効率性は成功したウェブサイトの重要な要素です。 そのサイトは、 オンラインで画像を使用する方法において効率的でなければなりません。 これにより、サイトが訪問者に適したパフォーマンスを発揮し、デバイスですばやく読み込まれるようになります。 効率性は、全体的なプロセスの一部でもあり、サイトの進捗状況を時間と予算にとどめるのに役立ちます。
最終的に、サイトのCSSシート用に書かれたスタイルを含め、効率性はウェブサイトの作成と長期的な成功のすべての側面で役割を果たします。 よりシンプルでクリーンなCSSファイルを作成できることが理想的です。これを実現する方法の1つは、複数のCSSセレクタをグループ化することです。
グループ化セレクタ
CSSセレクタをグループ化すると、スタイルシートでスタイルを繰り返さずに、同じスタイルを複数の異なる要素に適用できます。 2つまたは3つ以上のCSSルールを持つのではなく、すべて同じことをします（たとえば、何かの色を赤に設定するなど）、あなたのページに対して1つのCSSルールが適用されます。
この「セレクタのグループ化」がページに役立つ理由はいくつかあります。 まずは、あなたのスタイルシートは小さくなり、より速くロードされます。 確かに、スタイルシートは、サイトの読み込みが遅くなるという主な原因の1つではありません。 CSSファイルはテキストファイルなので、最適化されていない画像と比べると、実際に長いCSSシートでさえ、ファイルサイズは小さくなります。 それでもなお、ちょっとしたこともありますが、CSSのサイズをいくらか小さくしてページを読み込むことができれば、それは常に良いことです。
一般に、サイトの平均ロード速度を超えると3秒未満です。 3〜7秒は平均で、7秒以上は遅すぎます。 これらの数字が小さいということは、サイトでそれらを達成するためには、できる限りのことをする必要があるということです。 このため、グループ化されたCSSセレクタを使用してサイトをスピーディに保つことができます。
CSSセレクタをグループ化する方法
スタイルシートでCSSセレクタをグループ化するには、コンマを使用してスタイル内の複数のグループ化セレクタを区切ります 。 以下の例では、スタイルはp要素とdiv要素に影響します。
div、p {color：＃f00; }コンマは基本的に「と」を意味します。 したがって、このセレクタはすべての段落要素とすべての除算要素に適用されます。 コンマがない場合は、代わりに部門の子であるすべての段落要素になります。 これは非常に異なる種類のセレクタなので、このコンマは実際にセレクタの意味を変更します。
セレクタの任意の形式は、他のセレクタとグループ化できます。 この例では、クラスセレクタはIDセレクタでグループ化されています。
p.red、#sub {color：＃f00; }したがって、このスタイルはclass属性が "red"の段落に適用されます。また、ID属性が "sub"である要素は（どの種類が指定されていないので）適用されます。
任意の数のセレクタをグループ化することができます。セレクタにはシングルワードとコンプルントセレクタが含まれます。 この例には、4つの異なるセレクタが含まれています。
p、.red、#sub、div a：リンク{color：＃f00; }したがって、このCSSルールは次のように適用されます：
- 任意の段落要素
- 「赤」のクラスを持つ要素は、
- IDが "sub"の要素は、
- 部門の下位であるアンカー要素の「リンク」擬似クラス。
最後のセレクタは複合セレクタです。 このCSSルールの他のセレクタと簡単に組み合わせることができます。 このルールでは、これらの4つのセレクタで＃f00（赤色）の色を設定しています。これは、同じ結果を得るために4つの別々のセレクタを作成するよりも好ましい方法です。
セレクタをグループ化するもう1つの利点は、変更が必要な場合は、複数のCSSルールではなく1つのCSSルールを編集できることです。 これは、このアプローチが将来的にサイトを維持する際のページの重量と時間を節約することを意味します。
任意のセレクタをグループ化できます
上記の例からわかるように、有効なセレクタはグループに配置でき、グループ化されたすべての要素と一致するドキュメント内のすべての要素は、そのスタイルプロパティに基づいて同じスタイルになります。
コード内の読みやすさのために、グループ化された要素を別々の行に並べることを好む人もいます。 ウェブサイトの外観と読み込み速度は変わりません。 たとえば、コンマで区切ったスタイルを1行のコードで1つのスタイルプロパティに結合することができます。
th、td、p.red、div＃firstred {color：red; }
明確にするために、個々の行にスタイルをリストすることもできます。
th、
td、
p.red、
div＃firstred
{
赤色;
}
いずれの方法でも複数のCSSセレクタをグループ化すると、サイトのスピードアップが図れ、長期的にスタイルを管理しやすくなります。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：5/8/17