管理しやすいclass名のつけ方
HTMLの要素を指定する方法がCSSには多くあります。
それらを自由に使うのではなく、ルールを決めて使うことで変更に強くなります。また複数人と開発しているときに、全員で同じルールを共有すると後から読み取りやすくすることができます。
今回は、ルールの一つとしてBEMと呼ばれる方法をご紹介します。
BEMの概要
BEMはまずclass名の命名にルールを設けます。
BEMとは以下の３つの頭文字をとった単語です。
・ Block
・Element
・Modifier
HTMLタグに設定できるclassを使い、BlockとElementにHTMLタグを分類して、スタイルを定義します。ModifierはBlock、Elementを強調するための色違い、無効のときのような特殊な状態で使用します。
今から紹介していく内容は作っているものや、状況によって自分、もしくはチームのメンバーが使いやすいようにルールをカスタマイズして使うことをオススメします。
Block
Blockはそれひとつで意味のあるまとまりを表します。
ページのヘッダーをBlockとして扱うこともできますし、ヘッダーの中にあるページのメニューもBlockとして扱えます。
Blockの中には、Block、Elementの両方を配置することができます。Modifierがついていても大丈夫です。
class名をつけるには、そのBlockを表す名前を小文字英数字で書きます。
<article class="profile">
<!-- ここに中に配置するBlockまたはElement -->
</div>上の例ではprofileというBlockを定義しています。
同じBlockが複数配置される可能性もあるので、スタイルはそれも加味して定義しましょう。
Element
ElementはBlockの一部であり、それ単体では意味を持ちません。
ページのヘッダー内のタイトル文字をElementとして扱ったり、メニュー内のリンクをElementとして扱ったりします。
Elementの中には、Block、Elementを配置してはいけません。そうなりそうな場合は新たにBlockを作って細分化しましょう。
class名をつけるには、親となるBlock名の後に「__」（アンダーバーふたつ）を書き、その後にElementを表す名前を小文字英数字で書きます。
<article class="profile">
<h1 class="profile__title">PROFIEL</h1>
<ul class="link-list">
<li class="link-item"><a href="" class="link-item__link">AAA</a></li>
<li class="link-item"><a href="" class="link-item__link">BBB</a></li>
<li class="link-item"><a href="" class="link-item__link">CCC</a></li>
</ul>
</div>上の例ではBlockがprofile、link-list、link-itemの3つで、Elementがtitleとlinkになります。またBEMでは単語の区切りに「-」（ハイフンひとつ）を使用します。
一見liタグがlink-listのElementのように見えますが、Elementの中にElementを入れることは推奨されていないので、liタグをBlockとしてaタグをElementにしています。
Elementはそれぞれの親となるBlockの外で使用されることはありません。先ほどの例では、link-item__linkの親がlink-itemです。
<!-- NG -->
<ol class="num-list">
<li class="num-item"><a href="" class="link-item__link">AAA</a></li>
<li class="num-item"><a href="" class="link-item__link">BBB</a></li>
<li class="num-item"><a href="" class="link-item__link">CCC</a></li>
</ol>上はダメな例です。num-itemというBlock内にlink-item__linkというElementが入っています。ですがclass名からわかるように、link-item__linkの親はlink-itemでありnum-itemではないので間違いですね。
<!-- OK -->
<ol class="num-list">
<li class="link-item"><a href="" class="link-item__link">AAA</a></li>
<li class="link-item"><a href="" class="link-item__link">BBB</a></li>
<li class="link-item"><a href="" class="link-item__link">CCC</a></li>
</ol>この例であればlink-itemがlink-item__linkの親なので正しく書けています。
Modifier
ModifierはBlock、Elementに付加して使います。付加された要素はもともとのBlock、Elementとして扱えるので、付加したとしても大きくルールが変わることはありません。
人気順に並んだ記事の一覧ページで1位の記事だけ、背景色を黄色にしたいとか、押せないようにしてあるボタンなので見た目も灰色にしたいみたいな状況で使います。
javascriptで見た目を変更する際にも活用してみましょう。
class名をつけるには元々の名前の末尾に「--」（ハイフンふたつ）を書き、その後にModifierを表す名前を小文字英数字で書きます。そのときに、元々のclass名を消さずにスペース区切りで記述します。
ちなみにHTMLではclass名をスペース区切りで書くと、複数のclassを指定することができます。
こうして元々のclassを残すことによって、CSSでは通常との差がある部分だけを書くことができるので、コードの重複がへり管理しやすくなります。
<article class="profile">
<h1 class="profile__title">PROFIEL</h1>
<ul class="link-list">
<li class="link-item"><a href="" class="link-item__link">AAA</a></li>
<li class="link-item link-item--back-red"><a href="" class="link-item__link">BBB</a></li>
<li class="link-item"><a href="" class="link-item__link">CCC</a></li>
</ul>
</div>上の例ではlink-itemというBlockにback-redというModifierを付加しています。link-item--back-redというclass名に元々のlink-itemというclass名も残します。
CSSの書き方
BEMを使ってCSSを書く場合、より活用するために気を付けておくことがあります。
/* NG */
header {
}
ul li {
}
li.link-item {
}
a {
}ブラウザごとのCSSの初期値を消すために、リセットCSSを使うような例外的なケースもありますが、
上の例であるような要素の指定はブラウザでページを表示するための処理を遅くしたり、最終的にどのスタイルが適用されるのか推測しにくくなります。
/* OK */
.profile {
}
.profile__title {
}
.link-list {
}
.link-item {
}
.link-item--back-red {
}このようにclass名単体で指定すると、読みやすく理解しやすい、ブラウザでの表示にも優しいCSSが書けるようになります。
まとめ
今回はBEMという方法を紹介しました。Webサイトの作成は様々なケースがありますので、この記事に書いてあることは参考程度に使って、状況に合わせて活用してみてください。
・BEMという方法がある
・Blockはそれひとつで意味のあるまとまり
・ElementはBlockの一部
・ModifierはBlock、Elementを修飾できる
・スタイルはclass単体で指定するといい
また、BEMの記述と相性がいいSASS・SCSSというスタイルシート言語も存在しますので、気になる方はさらに調べてみてくださいね。
この記事が参考になれば幸いです！