コーディングが少し楽になる、意識したい命名規則とCSS設計。

Ryo Sasaki

2022.06.06

皆様こんにちは。フロントエンドエンジニアのレンツです。僕の連載では初学者向けに、コーディングのノウハウを提供しています。

今回はHTMLに付けるclassの名前について考えてみたいと思います。classに付ける名前によってタグの組み方もコーディングの速さも変わってきますし、拡張性の高さも変わってきます。

classの命名についてちょっと知識をつけていただいたら、コーディング時間が短くなってもっと楽しく開発できるようになりますよ！というわけでいってみましょう。

コーディングの悩み：classの命名規則
正しいCSS設計
まとめ

コーディングの悩み：classの命名規則

さて、HTMLとCSSを勉強したら何かサイトを作ってみたくなりますよね。HTMLタグを書いてclassをつけてCSSでスタイルを当てていく〜……という作業を延々と繰り返す日々が始まります。

勉強しはじめでアドレナリン全開のころは勢いでいくらでもできる作業なのですが、考えなしにスタートしてしまうと時間もコード量もすごいことになってしまいます。そしてふと振り返るとごちゃごちゃと冗長になってしまい、簡単な修正や使い回すために切り分けることもままならないことになってしまう……なんてこともあります（僕は未だにあります）。

お仕事としてコーディングするのであれば、もっと体系的にコーディングして、時間をかけずにきれいなコードを残したいものです。そして、いかにデザインを完璧に再現できるようになっても、複雑な機能が実装できるようになっても悩んでしまうのが「classの名前」であり、体系的で速くきれいなコーディングのために欠かせない考えになります。

名前なんてなんでもいいじゃんと最初は思われるかもしれません（もちろん何の意味もない名前にすることはないと思いますが）。でも名前の付け方がうまくないと不要なタグを使ってしまったり、逆に一つのタグに対して機能を持たせすぎてしまったりします。

考えずにコーディング

たとえばこの画像のようなパーツを実装するとしましょう（この記事を通してですが、めっっちゃ極端な例なので悪しからず）。

グレーの背景のリストがあります。テキストの左側に余白もありますね。単純に考えたらulタグにグレーの背景を指定して、padding-leftを指定して終わりとなります。

<ul class="list">
    <li class="item">1行目</li>
    <li class="item">2行目</li>
    <li class="item">3行目</li>
</ul>
<style>
.list {
  width: 200px;
  padding-left: 60px;
  background-color: gray;
}
</style>
※細かいスタイルは割愛

でもたぶんこうした方がいろいろ都合が良いです。

<div class="list-wrapper list-wrapper--gray">
    <ul class="list">
        <li class="item">1行目</li>
        <li class="item">2行目</li>
        <li class="item">3行目</li>
    </ul>
</div>
<style>
.list-wrapper {
  width: 200px;
  padding-left: 60px;
}
.list-wrapper--gray {
  background-color: gray;
}
</style>

ulタグをさらにdivで囲ってスタイルを当てています。divにはクラスが2つついています。若干複雑にしてまで箱で囲う理由は何でしょうか？

複雑なほうが明確になる？

たとえばこのようなデザインだったらどうでしょう？

先程のパーツと類似したリストが追加されました。2つ目は背景も色余白も位置も異なります。これを実装するにはさらにさらにdivで囲ってあげて……こうするほうが便利です。

<div class="list-section">
    <div class="list-wrapper list-wrapper--gray">
        <ul class="list">
            <li class="item">1行目</li>
            <li class="item">2行目</li>
            <li class="item">3行目</li>
        </ul>
    </div>
</div>
<div class="list-section">
    <div class="list-wrapper list-wrapper--lightgray">
        <ul class="list">
            <li class="item">1行目</li>
            <li class="item">2行目</li>
            <li class="item">3行目</li>
        </ul>
    </div>
</div>
<style>
.list-section {
   display: flex;
}
.list-section:first-of-type {
  justify-content: flex-start;
}
.list-section:nth-of-type(2) {
  justify-content: flex-end;
}

.list-wrapper {
  width: 200px;
  padding-left: 60px;
}
.list-wrapper--gray {
  background-color: gray;
}
.list-wrapper--lightgray {
  background-color: lightgray;
}
</style>

list-sectionというクラスのついたdivはリストの位置を決めていて、list-wrapperというクラスのついたdivはリストの背景と余白を決めています。そしてリスト本体であるulは背景色の指定もなくなり、リストを作るという目的だけを持つことになりました。

divで囲うことで要素が増えても、各要素に明確な意味があり構造が明確です。よってデザインのパターンが増えても要素ごとにシンプルな役割（スタイル）を当ててデザインを再現できます。

混乱するクラス名

ここで、あえて良くない書き方をしてみます。このソースは先程と同じデザインになりますが、いくつか良くない点があります。

<div class="top-list">
  <ul class="gray-list">
    <li class="item">1行目</li>
    <li class="item">2行目</li>
    <li class="item">3行目</li>
  </ul>
</div>
<div class="list-bottom">
  <ul class="list-lightgray">
    <li class="item">1行目</li>
    <li class="item">2行目</li>
    <li class="item">3行目</li>
  </ul>
</div>
<style>
.top-list {
  display: flex;
  justify-content: flex-start;
}
.list-bottom {
  display: flex;
  justify-content: flex-end;
}
.gray-list {
  width: 200px;
  padding-left: 60px;
  background-color: gray;
}
.list-lightgray {
  width: 200px;
  padding-left: 60px;
  background-color: lightgray;
}
</style>

あえてdivを減らし、再びulタグに直接スタイルを当てています。さらに各要素はそれぞれが固有のクラス名を持っています。全体的なコード量は減っているので良いようにも見えますが……たぶん先輩エンジニアは激怒します。

これの何が良くないかといいますと、まずクラス名に統一感がありません。上側のdivのクラスが top-listに対し下側は bottom-listとなっています。真ん中にもう一つリストを挟むことになったらどうでしょう。

middle-listなのかlist-middleなのか悩んでしまいます。ここは素直に list-sectionという同じ名前のclassを付けて、:nth-of-typeでスタイルを個別に当ててクラス名を統一しましょう。

同じように上側のulタグのクラスが gray-listに対し下側は lightgray-listとなっています。真ん中にもう一つリストを挟むことになったらどうでしょう。

これに対し、一つ前の例のように classを2つつけたらスッキリします。

<div class="list-section">
    <div class="list-wrapper list-wrapper--gray">
        <ul class="list">
            <li class="item">1行目</li>
            <li class="item">2行目</li>
            <li class="item">3行目</li>
        </ul>
    </div>
</div>

おわかりになると思いますが、体系的な書き方をしないと、同じパーツが増えて使い回しが多ければ多いほど煩雑になり、同じスタイルを何度も書かなければいけないことが発生します。

これが作業時間の増大を招き、拡張のしづらさを生み、世界から平和がなくなってしまうのです。

正しいCSS設計

長々と説明しましたが、これを解決するのに正しいCSS設計が必要になります。HTMLの構造と classの付け方に統一的なルールを持とうというお話なのですが、これも実装者それぞれに異なるルールがあったら困ってしまいます。

いくつかのCSS設計手法があるのですが、LIGはここ数年BEMという手法を導入しております。BEMとは、Block Element Modifierの頭文字をとったCSS設計の名称で、それぞれ下記のような意味を持ちます。

BEMとは: Block：ブロック。画像やテキストなどで構成されるかたまり
Element：エレメント。ブロックの中の要素で、これの集まりでブロックを作る
Modifier：モディファイア。ブロックやエレメントの別バージョンを意味する

先程の例でいうと……

<div class="list-section">
    <div class="list-wrapper list-wrapper--gray">
        <ul class="list">
            <li class="item">1行目</li>
            <li class="item">2行目</li>
            <li class="item">3行目</li>
        </ul>
    </div>
</div>

list-sectionがブロックで、list-wrapperがエレメント、–gray部分がモディファイアで list-wrapperの緑バージョンを意味しています。

ちなみに、BEMにはクラス名の作り方にもルールがあって、Block__element–modifierのような命名規則が存在します。

これに従って先程の例を書き直すと……

<div class="list-section">
    <div class="list-section__list-wrapper list-section__list-wrapper--gray">
        <ul class="list">
            <li class="list__item">1行目</li>
            <li class="list__item">2行目</li>
            <li class="list__item">3行目</li>
        </ul>
    </div>
</div>

ist-sectionの下にあるから list-section__list-wrapperで、その色違いだから list-section__list-wrapper–grayというわけです。

部分的にすごく長い class名が生まれましたが、ルールに則っていれば長くても意味が明確にわかるというわけです。

ちなみに、list-section__list-wrapperから listに至る際にBEMのルールが破綻していますが、ルールに則りすぎると永久に長いクラス名が生成されてしまい本末転倒です。

どこか切りの良いところでBEMのリセットを行い、ある程度の短さを保つのがベターです。ここでは ulの上の階層か下の階層でタグの目的・意味が明確に異なるのでリセットのポイントとしました。