きょうはあしたのために

今日気づいたことをかくんだ

CSSのクラス名なにつけるよって話

CSSのクラス名とかどんなんつけよう・・・

よく見るパターンとしては、以下のパターン。

  • 要素の意味
  • 見た目

見た目でつけるのはNG。「要素の意味」でつけるべきだと思う。

見た目で命名した例

<p class="text-red">エラーが発生しました</p>

上記例でいうと、文字色を青に変えたい場合にclass名自体を変更する必要がでてきたり、
赤字+太字にしたい場合に新たなclassを追加で付与したりする必要があるなどダサイことこのうえない。

要素の意味で命名した例

<p class="error-message">エラーが発生しました</p>

追伸:
googleのスタイルガイドにもかいてあったよ
https://google.github.io/styleguide/htmlcssguide.xml#ID_and_Class_Naming