はじめに
副業先でCSSの見直しを行うことになりました。
主に自分の確認用ですが、チーム開発の時の基準になるかもと思い、CSSの命名規則について整理しました。
副業先がBEMを使用しているので、命名規則もBEMを意識したものになっています。
また、入れ替わりの激しい職場ということもあり、共通認識を持ち難い環境のため、ルールをシンプルにすることを優先しております。（結果、class名が冗長になる場合があります）
命名規則
- シングルクラスで記述する
- 複数の単語の組み合わせは
ケバブケース - 単語は省略しない
- 予測しやすい名称（見た目や場所ではなく意味で）
- 最初からコンポーネントを意識しない
シングルクラスで記述する
1つの要素に対して、1つのclassを指定する（多くても2つまで）。
<!-- OK -->
<div class="hoge1">〜</div>
<!-- NG -->
<div class="hoge1 hoge2 hoge3">〜</div>
複数の単語を組み合わせる時はケバブケース
単語を組み合わせるときは-（ハイフン）使う。
<!-- OK -->
<div class="hoge-title">〜</div>
<!-- NG -->
<div class="hoge_title">〜</div>
<div class="hogeTitle">〜</div>
<div class="HogeTitle">〜</div>
単語は省略しない
class名に使用する英単語は、長くても省略せずに記載する。
（省略する内容に個人差が生まれやすいため）
<!-- OK -->
<div class="title">〜</div>
<!-- NG -->
<div class="ttl">〜</div>
予測しやすい名称（見た目や場所ではなく意味で）
HTMLの構造や色が変わったときに破綻しないように、できる限り意味でつけるようにします。
意味でつけるようにすることで、なんのstyleかも予測しやすくなると思います。
<!-- OK -->
<div class="text-attention">〜</div>
<!-- NG -->
<div class="text-red">〜</div>
具体的な命名については、A/HC/LC pattern を参考にしています。
Action (A)に相当するものがない場合は、UIや要素の名前を代用しています。
以上です。
最後までお読みいただき、ありがとうございました。
私もまだまだ勉強中で「これだ！」と確信できる部分は少ないものの、ある程度ルールを決めておくことで、見通しの良いデータに近づくのではないかなと思っています。