LoginSignup
6
1
お題は不問!Qiita Engineer Festa 2023で記事投稿!

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

Last updated at Posted at 2023-07-21

これは何

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タグを確認しそれらの子孫セレクタを解析します。

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

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1