クラス命名について

HTMLとCSSを勉強し始めたばかりの頃によく迷うのが「クラスの命名」だと思います。

どこになんて言う名前のクラスを付けたらいいのかってすごく迷いますよね。自分も当時はその状態でした。

クラス名のつけ方に迷ってしまう方の参考になれば幸いです。

まず、良いcssの定義を再確認しましょう。

● 予測しやすい
● 再利用しやすい
● 保守しやすい
● 拡張しやすい

以上の４つです。
最初は一番上にある「予測しやすい」を重視してクラス名を考えていくとよいと私は考えています。

■良くないクラス名のつけ方

<header class="top">
    <ul class="u2">
        <li class="u-l">リスト</li>
    </ul>
</header>

極端な例を記述しました。
上記のクラス名でダメなところは、「クラス名を見てどこの部分か予測しづらい点」です。

headerなのにtopというクラス名になっているのでcssを確認する際、非常にわかりづらい。また、u2やu-lというのもパッと見ただけでは全く分かりません。

■良いクラス名のつけ方

<header class="header">
    <ul class="header__ul">
        <li class="header__li">リスト</li>
    </ul>
</header>

いかがでしょうか？最初の分かりづらい例より遥かに予測しやすいクラス名になっていると思います。
このようにクラス名を見ただけでどこの記述でどの部分なのかを明確にできるような命名が理想的です。
アンダースコア2つで区切っているのは、BEM記法に関連してくるので興味のある方は是非調べてみてください。

正直クラス名が変でもサイト表示には影響はありません。
しかし、作って終わりではなくその後に運用や保守・点検など自分以外の人がする事も大いにあり得ます。
その時だけでなく先のことを考えて記述していく事が大切です。

■まとめ

最初のうちは「予測しやすい」を重点的にという事を書きましたが、慣れてきたらその他についても意識しつつ命名できると尚良いかと思います。

最後まで読んでいただきありがとうございました！
よければシェアして頂けると嬉しいです。