はじめに
こんにちは。
みんなのマーケットのテクノロジー本部でデザイナーをしているラミレスです。
本日は「あとで困らないCSS設計」の第一回目として、「クラス名の付け方」についてお話したいと思います。
クラス名を付けるのは意外と大変
私はクラス名を付ける時に非常に悩みます。
「このクラス名をつけて、あとで誰かが困ることはないかな？」
「他で利用しているクラス名ではないかな？」
などなど。
特に子要素、孫要素など、要素が似ていると似たような名前になってしまったりして、「似たような名前が多いけど、この名前で伝わるかな？」と不安になったりしています。
そこで、今回は「できるだけ簡単」に「みんなが困らない」クラス名を付ける方法を調べてみました。
クラス名の悪い例
まずはこれまで遭遇して私が困ったクラス名（クラス名の悪い例）を紹介していきます。
（１）相対的
例えばクラス名の中に ”big” と記載があったとしましょう。
しかし、このクラス名はあまりよろしくありません。 理由は、
・大きいって誰から見て、何と比較して大きいの？
・今後もっと大きいものが出てきたらどうするの？
という問題がつきまとうためです。
例としては下記が挙げられます。
悪い例：
.big-img
.small-btn
（２）HTML要素やDOMツリーに依存している
例えば ”h2-ttl” のようなHTML要素に依存するクラス名は、「h2がh1に変化した場合に矛盾する」などの問題が生じてしまいます。
また、DOMツリーの構造に依存している “body-div-p” のような場合も同様で「pがspanに変化した場合に矛盾する」という問題が生じます。
そのため、HTML要素やDOMツリーに依存しないようなクラス名をつけましょう。
悪い例：
.body-div-p
（３）定義されていない省略形を使用
クラス名をつける時、「ボタンはbtnにしよう」とか「タイトルはttlにしよう」というようなルールや定義を組織内で決めている場合があります。
今回の悪い例は、その定義なしに勝手に省略形にして、本人以外が何を指しているかがわからないというケースです。
例えば、
.button-l
.pnNext
など。
なぜ困るのかというと、コードだけ見たときにクラス名からどこに指示を出しているのか瞬時に判断できなくなってしまうためです。
（実際の表示と照らし合わせながら、「ここのこと指しているのか」と想像しなければならない訳です）
BEMという命名規則
上記に挙げたような、「クラス名の悪い例」にならないようにするにはどうしたらいいか？
代表的な命名規則にBEMというものがあります。
まずBEMについて簡単に説明します。
BEMはBlock Element Modifierの略で、BlockとElementとModifierをルールに従ってつないだものです。
（１）Block
多くのWebページは、ヘッダー、メニュー、サーチ、フッターなどといったパーツの集まりで構成されています。BEMでは、これらのパーツをBlockと呼びます。
例：
header
head
contents
side
sidebar
menu
search
footer
（２）Element
1つのBlockは、Block自身を構成する部品のような（Blockを構成している）ものを有しています。
例えば、検索フォームBlockなら、「入力フィールド」と「ボタン」の2つの部品で構成されています。これをElementと呼びます。
例：
ttl
body
detail
more
submit
input
btn
menu-item
list-item
（３）Modifier
同じBlockであっても、カレント状態であったり、通常の状態とエラー状態などで異なる装飾を設定する場合があります。そうした装飾に関する調整を、Modifierと呼びます。
例：
current
disabled
checked
fixed
以上がBEMの簡単な説明です。
BEMには
・__（アンダーバー2つ）--（ハイフン2つ）で接続する
・Element-Modifier間は _（アンダーバー）で接続する
・Modifierは状態の名前と値をセットにする
など、細かいルールがありますが、今回はこのBEMを応用してすぐに使える命名規則を私なりに考えてみました。
BEMの中で、Blockはどこの部分でも必ずある要素ですが、ElementとModifierは要素によって存在しない場合もあります。
そこで、今回決めた命名規則は以下の4つです。
・Blockを記載する
・ある場合はElementを記載する
・ある場合はModifierを記載する
・全てをハイフンで接続する
例えば、
「ヘッダー内にあるマイページに遷移するためのボタン」であれば
.header-mypage-btn
「コンテンツ内のソートを切り替えるタブ」であれば
.contents-sort-tab
などの名前を付けることができます。
今回挙げたのはあくまで例ですが、社内や同じ組織の人と命名規則を決めて運用することで、あとで誰かが困ることがなくなるのではないでしょうか。
（孫要素をどうするかや、Blockに使う名前を固定するなど、細かいルールも決めておくと、より簡単にクラス名を考えることにできると思います）
命名規則を決めると下記の利点を享受できるはずです。
・クラス名を付けるのに時間がかからない
・誰が見ても何を意味しているかわかる
・同じクラス名になりにくい
最後に
私たちテックチームでは「くらしのマーケット」を一緒に作る仲間を募集しています。ご興味のある方、ご応募お待ちしております！
http://www.minma.jp/careers/
「話だけ聞きたい！」ってことでオフィスに遊びにきていただくことも可能です。 話を聞いてみる / みんなのマーケット株式会社
参考文献
https://ferret-plus.com/7808
https://app.codegrid.net/entry/bem-basic-1#toc-3
https://qiita.com/jiroor/items/17c994bd3b18c83d746d
https://en.bem.info/
