CSSセレクタの効率的、効果的な使い方をいろいろ

効率的なセレクタの使い方と読み込み速度を考えたときに効果的なセレクタの使い方に分けて紹介していきます。

CSSセレクタの効率的な使い方

同じ内容ならまとめる

例えばこんなCSSがあります。

h1 { color: black; }
p { color: black; }

カンマで区切ってまとめることができます。

h1, p { color: black; }

!importantがある場合

続いて、!importantがある場合。

h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; }
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }

同じようにまとめることができますが、「!important」が付いてあるものはまとめない方がいいです。

h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }

以上「CSS: Using every declaration just once - Make the Web Faster — Google Developers」からでした。

同じところだけまとめる

こんな感じでもうちょっと色々と考えてみます。

h1 {
  color: red;
  font-weight: normal;
  font-size: 18px;
}
h2 {
  color: red;
  font-weight: normal;
  font-size: 16px;
}
h3 {
  color: red;
  font-weight: normal;
  font-size: 14px;
}

同じところはまとめて、違うところは別々に記述することができます。

h1, h2, h3 {
  color: red;
  font-weight: normal;
}
h1 { font-size: 18px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

かなりすっきりします。

属性セレクタを使ってまとめる

ちょっと違う例を。HTMLがこんな場合で考えます。

example1
example2
example3

CSSの内容は先ほどと同じで、セレクタがタグではなくクラスになっています。

.example1 {
  color: red;
  font-weight: normal;
  font-size: 18px;
}
.example2 {
  color: red;
  font-weight: normal;
  font-size: 16px;
}
.example3 {
  color: red;
  font-weight: normal;
  font-size: 14px;
}

使っている人はあまりいないかもしれませんがこんな使い方もあります。

[class^="example"]  {
  color: red;
  font-weight: normal;
}
.example1 { font-size: 18px; }
.example2 { font-size: 16px; }
.example3 { font-size: 14px; }

[class^="example"]でクラス名が「exampe」で始まる要素、すなわち「exampe1」「exampe2」「exampe3」のすべてに適用されます。フォントサイズはそれぞれで指定します。CSS3ですがIE7以降で使えます。

CSS3については「保存版！CSS3セレクタの説明書」をご覧ください。

クラスを複数指定する

クラスはスペースで区切ると複数指定することができます。内容的には先ほどのものと同じです。

example1
example2
example3

共通な部分と個別の部分を別のクラスで指定します。

.example {
  color: red;
  font-weight: normal;
}
.example1 { font-size: 18px; }
.example2 { font-size: 16px; }
.example3 { font-size: 14px; }

指定するスタイルの数は3つから4つになりますが、記述量は減りますし、変更するときの手間が省けます。

CSSセレクタの効果的な使い方

セレクタはシンプルに

ここからは、読み込みスピードを考えた場合に効果的なセレクタの使い方を紹介します。

このように親から子へ順番に書いている場合があります。

body div ul li.example {
  color: red;
}

このように親から順番に書くと、そのセレクタがどこを指すのか分かりやすいです。

しかし、ブラウザは右から左へセレクタを探していきます（.example → li → ul → div → body）ので、数が多いと読み込みスピードも遅くなることになります。

よっぽどのことがない限りこれで十分です。

.example {
  color: red;
}

後から見たときにどの部分のスタイルか分かりやすい名前にしておきたいです。

子孫セレクタ避ける

先ほどと同じように読み込み速度を意識した場合に使い方です。次は効率的な書き方とはいえませんが。

• サンプル
• サンプル
• サンプル

• サンプル
• サンプル
• サンプル

このようにulにidを付けます。

ul#example1-1 li {color: blue;}
ul#example1-2 li {color: red;}

ブラウザはセレクタを右から左へマッチするか探していきます。ですので、すべてのliを探し出してから、ul#example1-1を親に持つかどうかを確認します。

• サンプル
• サンプル
• サンプル

• サンプル
• サンプル
• サンプル

HTMLはちょっと面倒になります。

.example2-1 {color: blue;}
.example2-2 {color: red;}

これだとクラス名にexample2-1またはexample2-2を持つものを探して終わりですので、読み込み速度を考えたときに効果的だといえます。

ユニバーサルセレクタは避ける

ユニバーサルセレクタはすべての要素に対して適用されます。

p * {...}

このように指定するとpタグの中にある要素すべてとなります。

しかし、ブラウザはすべての要素のなかで親要素にpタグを探しにいくので時間がかかりますので避けた方がいいといえます。

リンク以外に:hoverを使わない

div.onmouse:hover {...}

IE7と8では:hoverを使えますが、表示が遅くなるバグが報告されています。高速化を考えたとき使用を避けた方が無難です。どうしても使う必要があるときはjavascriptのonmouseover を使いましょう。

以上「Optimize browser rendering - Make the Web Faster — Google Developers」からでした。

最後に

ということで、CSSセレクタの使い方を色々紹介しました。

基本的な内容が多くなりましたが、ひとつでも新しい発見があれば嬉しいです。

CSSセレクタをもっと勉強したいという方は、以前書いた「意外と知らない!?CSSセレクタ20個のおさらい｜Webpark」や「保存版！CSS3セレクタの説明書｜Webpark」をぜひお読みください。