CSSを書く時に意識する原則

現在フロントエンドの開発をしたいため、HTML/CSS を勉強中です。

初心者ですが、学習の記録として、CSS を書く際に意識すると良い原則をまとめます。

一覧

  • クラス名は、デザインの意図が分かるように命名する。
  • セレクタを使う時は、タグ、クラス、ID の順に検討する。
  • 混合セレクタでは特定のコンテキストにおけるスタイリングを行う。
  • !important は基本的に使わない

クラス名はデザインの意図が分かるように命名する。

CSS で要素を指定する時、クラスはほぼ唯一スタイルの観点から名前付けを行うことができる。うまく使えば、HTML の要素に対してスタイルを適用するとは逆方向のアプローチが取れる。すでにスタイルが割り当ててあるクラスを HTML の要素に指定すると言った方法は、Bootstrap などの CSS フレームワークが提供している手法。
CSS フレームワークのクラス名などを参考に指定見ると良いかもしれない。

セレクタを使う時は、タグ、クラス、ID の順に検討する。

CSS では特定性の高いセレクタのスタイルの優先が優先されます。代表的なもので例を挙げるなら、以下の順になります。

  1. ID
  2. タグ
  3. クラス

CSS を書いていくときには、特定性の低いセレクタから使っていきます。なぜなら、特定性の低いセレクタによるスタイルは、高いセレクタによるスタイルを定義することによって上書きできるからです。これによって、デザインの要求が変わったとしても、取り得る手段の数を最大にしておくことができます。なお、混合セレクタは一般的に単体のセレクタに比べ特定性が高くなります。

混合セレクタでは特定のコンテキストにおけるスタイリングを行う。

混合セレクタは、一般的に特定性が高いため、あるコンテキストにおけるスタイリングを行うことに適しています。例えば、ある要素の直下にあるタグと言ったような場合です。また混合セレクタで指定する場合も、極力特定性が低くなるように指定する方が良いのは同じです。

!important は基本的に使わない

!important は、ID よりも特定性が高いセレクタです。
!important が必要になる場面はほとんどありません。これは全体の設計を崩しかねないため、基本的には使わないようにする方が賢明です。
!important を使うことになるような場面があった場合、それは CSS を再設計するための兆候だと考えるべきです。

まとめ

あくまで学習の記録のため、有効性は保証できません。なお、新たなものを覚えたら追記する可能性があります。