こんにちは！albedo japanに新卒で入社した駆け出しエンジニアです。
実務でページを作るようになってから一番悩んだのが 「クラス名の付け方」 でした。
プロジェクトの規模や性質によってルールが異なり、最初は意味もわからずかなり混乱しました。
「あまり考えずに書いていたら注意された…」なんて経験をした方もいるかもしれません。
そこで今回は、備忘録も兼ねて代表的な命名規則である BEM についてまとめたいと思います。
BEM とは?
BEM（ベム）とはBlock、Element、Modifierのそれぞれ頭文字をとったもので、HTML要素を役割ごとに分解して命名するルール です。
- Block： コンポーネントそのもの（再利用可能な部品の単位）
- Element： Blockを構成する要素（titleやimgなど）
- Modifier： BlockやElementの見た目や状態の違い（色や可視状態かなど）
BEMの書き方
Block__element–-modifier の形で命名し、
Elementはアンダースコア２つ、Modifierはハイフン２つで区切ります。
サイトでよく使うカードレイアウトに表すとこんな感じです！
<div class="card card--highlight">
<h2 class="card__title">カードのタイトル</h2>
<p class="card__description">説明文が入ります</p>
<button class="card__button">詳しく見る</button>
</div>
なんでBEMを使った方がいいの？
クラス名のつけ方にルールがないと、あとから見たときに
「これは何のためのスタイルだっけ？」と迷うことがよくあります。
パーツを使いまわしたいときにも、どのスタイルがどこに効いているのかわかりづらく、うまく再利用できないことも出てきてしまいます。
BEMは、そんな “わかりづらさ” や “使い回しづらさ” を減らすための命名ルールです。
.intro-box .title {
border: 2px solid red;
}
例えば上記のcssの場合.titleを他の場所に使いたい！となっても、流用先が.intro-box以外になるとこのスタイルを流用することができません。
.titleだけをパーツとして作ることにより、どこにでも流用することができます。
BEMのメリット・デメリット
メリット
- 命名規則が明確でコードの可読性が高い
ルールが統一されているため、クラス名を見ただけでパーツがどんな要素、状態なのか一目でわかります。 - スタイルのスコープが明確になる
Block単位で管理できるので、他のコンポーネントに影響しにくいです。
「ここを変えたら他の場所も変わっちゃった！」なんてこともないので安心。 - パーツが他の場所でも使いやすい
Block単位で切り出せるので、うまく設計できれば他のページにも流用しやすく、効率的にコードを書くことができます！
デメリット
- クラス名が長くなりやすい
.card__description--highlightのようにクラス名がとにかく長くなりがち。 - HTMLを書くのが大変
1の「クラス名が長くなりやすい」にも言えることですが長いclassが多くなるとHTMLがすごいことに…
インデントや改行などで読みやすくする工夫が必要になりそうです。
まとめ
今回は初学者ながらBEMについてまとめてみました。
最初は理解しづらいかもしれませんが、慣れれば格段に開発が楽になるなと感じました。
自分もまだまだ完璧とは言えないのでBEMをマスターしてサラサラコードを書けるようになりたい！(願望)