CSS はその仕様上、ある程度自由に記述することができるため人によって書き方が千差万別です。
いろいろなサイトを見ていく中で、これはNGだろう、これは気をつけたほうがいいだろうという点をまとめました。
クラス名から想定される使用用途が限定的すぎる
width を 124px にするために設定したクラスで、実際にあった例です。
HTML
<div class="card">
<div class="w-124"><div>
</div>CSS
.w-124 {
width: 124px;
}width 124px を設定したいがためにw-124という命名をされています。
一見汎用的な名前っぽいですが、これは明らかに汎用的なスタイルではありません。124 px の width をたまたま設定したい箇所がどれほどあるでしょうか？
この命名を付けた場合、124 px から変更があった時にクラス名も変更しないと、クラス名とスタイルが噛み合わずに非常にやっかいなことになります。
.w-124 {
width: 118px; /* 修正によってひどい変更が行われた */
}余談ですが、margin や padding を設定するために.mt-10 { margin-top: 10px; }のようなクラスを用意しているプロジェクトは多数見かけます。
ですが width に対して.w-10 { width: 10px }といった固定値を与えるような汎用クラスは、使うシーンもほとんどないので普通なら不要です。
💡 解決方法：固有名を設定する
スタイルが1つであっても、その箇所に応じた固有クラス名を作って設 定します。例えば今回は card__block という名前にしてみました。
<div class="card">
<div class="card__block"><div>
</div>固有のクラスを付けてあげると、width 以外のスタイルを設定したくなった時にこのクラスにスタイルを追加すればよいだけなので、後々の修正にも強くなります。
間違っても card__w124 などという名前にはしないように。
クラス名とスタイルが噛み合っていない
先程の例と似ていますが、クラス名から判断できるスタイル以外のスタイルを割り当てることは避けましょう。
.c-red {
color: red;
font-size: 13px;
font-weight: normal;
}上記の例はクラス名だけみると、「色(color)を赤に変更する」という機能をもった汎用的なクラス名のように思えます。
ですが、実際は font-size や font-weight の指定が含まれており、色を変更する以外のスタイルが割り当てられています。このような汎用クラスは、使用した時に意図しないスタイルが反映される原因になります。
💡 解決方法（1）「クラス名から想定されるスタイルのみ含めるようにする」
c-red という名前であれば、color: red のみとします。これで「文字を赤くしたいが font-size は変えたくない」人は安心してこのクラス名を使うことができます。
.c-red {
color: red;
}💡 解決方法（2）「1つの機能を表すようなクラス名にする」
先程の例は「文字を赤くする」という機能に加えてフォントの指定も含まれていました。
ですが、そもそもこのスタイルの使用用途が「アラートを出すような文字に使用するクラス」などであれば、その機能を説明した命名を変更するというのも手です。
.text-alert {
color: red;
font-size: 13px;
font-weight: normal;
}これで「アラート文のテキストは text-alert を使う」ということが明確になり、他のスタイルが含まれていても困惑するようなことはなくなるはず。
英単語を省略しすぎている
これは人によって異なると思いますが、あまりに省略するクラス名は、他の人が修正する時に可読性が下がるかもしれません。
よくある省略単語でいうと、
- image -> img
- description -> desc
- section -> sec
- thumbnail -> thumb
- title -> ttl
僕は最初 ttl を見た時はなんのことだかわかりませんでした。他の英単語でも母音を抜く手法などはよくありますが、省略する単語とそうでない単語がバラバラになっていることがほとんどです。
どの単語を省略し、どの単語を省略しないかをチーム内で決定しているなら良いですが、そうでないなら基本的に英単語は省略しないのがベターかなと思っています。
僕自身は thumbnail だけは thumb として使っていますが、他の英単語は省略していません。
解決方法というのはありませんが、全て省略しないか、もしくはチームによって省略する単語を決めておくなど。
ただ、決まり事を作りすぎて縛るとコーディングが遅くなる & レビューが大変になる可能性もあるので程々に。
ハイフンとアンダースコアを適当に使っている
これは絶対に避けるべき！というほど致命的なものではありませんが、可読性の問題によるものです。
この2つには少し違いがあります。
- ハイフン … それぞれの単語を区切る意味合い。まとめてドラッグできない。
- アンダースコア … それぞれの単語をつなげる意味合い。まとめてド ラッグできる。
この2つの記号を適当に使っていると、命名規則に統一性がなくなってしまいます。それぞれの使い方については、BEM 記法や FLOCSS などを参考にすると良いでしょう。
可読性の観点から単語を区切りたいのであれば、意味合いからしてハイフンで良いのではないかと思います。まとめて選択することができないというデメリットもありますが、こちらはエディタの設定などで対処できることも多いです。
