CSSにおけるclass名の命名規則を考える

こんにちは、立野です。cssを記述する際に悩む時間が増えたので、改めてcssの記述ルールについて振り返ってみることにしました。

cssを書くこと自体はそれほど難しくは無いですが、しっかりとしたルールを決めてから記述していかないとコードがカオスな状態になり、容易に破綻します。別のclassに同じようなコードを書いていたり、どこのページに使っているclassかわからなかったり、クラス名を見てcssの影響範囲がわからなかったり、たとえ気をつけていても破綻してしまうこともあります。
なので極力そうならないように最初にルールを決めてからコーディングをしていきます。

CSSを書く上で良いと言われているコード

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

上記を意識しながらコーディングして、破綻しにくいhtml/cssを目指します。

CSSの設計手法

cssの設計手法は「BEM」「FLOCSS」「OOCSS」「SMACSS」など他にも色々なルールがあり、そのどれもが破綻しにくいcssコードを書くという目的に基づいて作られています。今回は「BEM」を紹介します。

BEM

BEMはblock(塊) / element(塊の中の要素) / modifier(状態)の3つに分けて考えてcssを設計していく手法です。この手法はcssを記述する時、sassを使った方が効率的に記述できるのでsassの使用をオススメします。

記述ルール

.block__element--modifier

上のように、blockとelementはアンダースコア2つ、elementとmodifierはハイフン2つで区切る。単語はハイフン１つで区切る。

.content__content-title
.content__content-text

上記のようなクラスがあった場合sassで書くと

.content{
    background: #fff;

    &__content-title{
        font-size: 18px;
    }

    &__content-text{
        font-size: 14px;
    }

}

こんな感じになります。
htmlはこんな感じ。

<section class="content">
    <h1 class="content__content-title">タイトル<h1>
    <p class="content__contnet-text">テキストテキストテキスト</p>
</section>

modifierをつけるとしたらこんな感じ
- html

<section class="content">
    <h1 class="content__content-title">タイトル<h1>
    <p class="content__contnet-text">テキストテキストテキスト</p>
    <p class="content__contnet-text--cautoin">テキストテキストテキスト</p>
</section>

- css

.content{
    background: #fff;

    &__content-title{
        font-size: 18px;
    }
    &__content-text{
        font-size: 14px;

	&--caution{
            color: red;
        }
    }
}

かなり大まかですがBEMの書き方は上記のような書き方になると思います。
sassの変数などを使ってより便利な書き方、メンテナンスが楽になる書き方があるのでcssを書く上でsassがあったほうが確実にいいですね。

ここからはTwitterで見かけて個人的にもこの書き方をしたほうが良いのではと思った記述方法が１点あったので紹介します。

単語は省略しない

よく「button」を「btn」、「description」を「desc」など名前を省略する書き方がありますね。記述する上で短いほうが書きやすいのは確かかもしれませんが、"見て理解できる"ことと"見て考えたら理解できる"にはコーダーの負担の大きさに違いが出てくると思います。コードが他の人に渡った際、クラス名を見て「このクラスの意図はなんだろう」と考え込んでしまうのはあまり良くないです。
また時間がたってから自分のコード見返してもつけたクラス名なんてほとんど覚えていないと思います。自身のためにもわかりやすいコードを心がけていきたいです。