[CSS] なぜタグに対してスタイルを当ててはいけないか

CSS で「タグに対してスタイルを当てず、クラスに対してスタイルを当てる」という規約をよく聞くと思いますが、その理由は理解しているでしょうか？

この記事では、なぜタグに対してスタイルを当てるのが駄目か解説したいと思います。

この記事を理解するために必要な前提知識

• CSSの詳細度に関する理解

詳細度がわからないという方は解説記事が色々あるため、理解できそうな記事を探して一度読んでみましょう。

結論

タグに対してスタイルを当てると、コンポーネントのスタイルにまで影響を与えてしまう可能性があるからです。

具体例

例1

上の例のように、ナビのクラス .nav-list が ul に対して指定されており、ナビに関連するスタイルが li と a タグに対して直接指定されているとします。

今回の例では、汎用コンポーネントとして c-button も定義されています。

この例1の時点では問題ないように見えますね。

次に、「ナビにログインボタンを追加したい。ログインボタンは目立たせたいので他と差別化するために汎用ボタンコンポーネントを使ってほしい」という要望が来たとします。

その場合以下のように実装しようとするはずです。

例2

汎用ボタンコンポーネントを使ったはずが、見た目が全然違いますね。背景色が違いますし、左右の余白も全然短いです。

これは何故かと言うと、 .c-button のスタイル指定より、 ul.nav-list > li > a のスタイル指定の方が詳細度が高いため .c-button のスタイル指定が打ち消されてしまったからです。

今回のように、ナビのaタグに対して直接スタイルを当ててしまうと、aタグを使用したい汎用コンポーネントのスタイルにも影響が出てきてしまいます。

これがタグに対してスタイルを当ててはいけない理由です。

どうすればよかったか

例3

今回の例の場合、上のようにタグに対してスタイルを当てるのでなく、全てクラスを付与してそれに対してスタイルを当てればボタンコンポーネントも本来の見た目で表示されます。

まとめ

「タグに対してスタイルを当てず、クラスに対してスタイルを当てる」という規約はこういう問題を防ぐためのものです。

この規約に違反すると、折角汎用的に作られたコンポーネントが全然使えなくなってしまいますので注意しましょう。