【CSS Tips】保守性のために、なるべく子孫セレクターなどの結合子を用いたセレクター使わない #パフォーマンス

これは何

CSSでなるべく子孫セレクターなどの結合子を用いたセレクター使わない方が良い理由を整理しました。

や>でセレクターを繋ぐことで、特定のタグやクラスの子要素や後にくる要素にスタイルを当てることができます。

結合子の解説

1つ目の要素の子孫要素に2つ目の要素があるとき

.container .button {
  background: #55c500;
}

1つ目の要素の直接の子要素に2つ目の要素があるとき

.container > .button {
  background: #55c500;
}

1つ目の要素のすぐ後に2つ目の要素があるとき

.container + .button {
  background: #55c500;
}

1つ目の要素の後に2つ目の要素があるとき

.container ~ .button {
  background: #55c500;
}

結合子を用いたセレクターは、HTMLの構造に大きく影響されます。

タグを追加したり一部を削除したり並べ替えをしたりした際に、意図しないスタイルの崩れを引き起こしてしまいます。

特に子結合子を用いている場合、親とこの間に一つ別のタグを挟むだけでスタイルが効かなくなってしまいます。

特に複数人で開発している場合や開発の規模が大きい場合、HTMLの変更によってスタイル崩れを起こしてしまう可能性が上がります。

このため、なるべく結合子を使わないことや、使う場合も子結合子よりも子孫結合子を使う・HTML側にコメントを残す影響が出にくい形で使う必要があります。

結合子を用いるとセレクターの詳細度が上がります。

セレクターの詳細度があがると、予期せず他の指定を上書きしたり逆に他の指定で上書きすることが難しくなったりします。

このため、コードを書きやすくするためになるべく詳細度は低くする方がよく、結合子を用いる必要のない場合は使用しない方が良いです。

セレクターが複雑になると、セレクターを解析する時間が増加します。
また、ブラウザはCSSセレクターを右から左に読み取るため、.list > aなどのようにすると、ページ全体のaタグを確認しそれらの子孫セレクタを解析します。

これらの理由から、できるだけ結合子を使わずにクラスセレクターなどの単純なセレクターを選ぶことで、保守性やパフォーマンス向上に貢献することができます。