CSS設計の「BEM」を1から理解する【使えそうな単語も一緒に】

CSSの学習をしているとBEMという単語を耳にする機会があると思います。
自分で調べてみたけど、いまいちピンと来なかったのでまとめてみました。

最後に簡単にまとめた使えそうな単語を表にしたので、class名で困ってる方に参考になれば幸いです。

1.BEMって？

Block(かたまり) -ブロック
Element(要素) -エレメント
Modifier(修飾) -モディファイ

3つの単語の頭文字をとって「BEM」って呼ばれてます。
CSSで厳格なclass名の命名ルールが特徴的な設計方法の一つのこと。

2.なんでBEM使うの？

私自身なりましたが、コーディングの学習をしていて、サイトの模写とかオリジナルサイトを作るときにclass名って悩みませんか？
例えば...

html

<div id="image" class="image"></div>
<h1 id="tittle" class="main-tittle"></h1>
<p class="content1"></p>
<p class="content2"></p>

上に書いたclass名とid名は自分が実際につけたものです。
これだとパッと見てどこの何の部分か分からないですね...
ペライチだったり、コンテンツの少ないhtmlだったら頑張れるけど、もしこのclass名がついてるものを改修しろって言われたら「これどこの何！？」ってなると思います。
そこでBEMを使えば

• コードを見ただけでスタイルの予測がしやすくなる
• 長期的なメンテナンス性が高くなる
• プログラマーの開発スピードも上がる

みたいなことが可能になります！！

3.わかったけど実際どう書くの？

html_Block&Element

<div class="profile">   <!-- Block -->
   <div class="profile__image"><img src="">   <!-- Element -->
   </div>
</div>

<div class="header">   <!-- Block -->
   <div class="header__logo"></div>   <!-- Element -->
   <div class="header__nav"></div>   <!-- Element -->
</div>

どうですか？
なんか見ただけでどこの場所が想像できませんか？

html_Block(Element)とModifierの区切り

<div class="content content--blue">   <!-- Modifier -->
   <img class="content__img" src="">
   <div class="content__text">テキスト</div>
</div>

class名が長くなっちゃうけど、Sass(SCSS)を使えばそこまで苦労はしません。

BEMは、*コンポーネント化 する為のフロントエンド設計方法の一つでもある。

*Webサイトで機能を持つ各パーツ(部品)の要素をまとめて成り立っていることをコンポーネント化と言います。

Block(かたまり)を構成するのがElement(要素)。
Modifier(修飾)は、Block(かたまり)とElement(要素)のスタイルや状態を修飾していきます。

BlockとElementはアンダースコア2つ(__)で区切る。
ElementとModifierはハイフン2つ(--)で区切るのが基本の書き方です。

書き方はわかったけど...

4.Blockってなんぞ？

Webページは、ヘッダー、フッダー、ナビゲーション、サイドバーなどのパーツで構成されています。
この各パーツにあたる部分 = Block
Blockは、コンポーネントって考えることも出来る。

Blockのルール
・ブロックは一つ一つが独立したパーツとして設計
・ブロックの中にブロックを作成してもOK
・ブロック名が重複することはない!

5.じゃあElementってなんぞや？

簡単にいうと、Blockを構成する要素のこと。
ヘッダーの中に タイトル とか ナビゲーション があると仮定して、タイトルとナビゲーションはヘッダーを構成する要素(Element)になる。

Elementのルール
　・必ずブロックの中に存在する
　・エレメント名の重複はOK

どこまでがBlockなのか一目で理解する事ができるから、必ずclass名にはBlock名をつける。

6.Modifierとは？

既存のBlockやElementに対して、一部の見た目や状態を変えたいとき、新しく作り直すが大変だから、Modifierを使用します。

BlockやElementが繰り返し使われているとか、２種類以上存在する場合はModirierを！

ModifierにはBlockに対して使うModifierとElementに対して使うModifierの2種類あります。
また、Modifierは名前であるkeyと値であるvalueを持ちます。

Modifierの使い方

<!-- Blockに対して修飾 -->
  Block--Modifier

<!-- Elementに対して修飾 -->
  Block__Element--Modifier

<!-- Modifierのkey,valueを指定する場合 -->
  Block--key_value
  Block__Element--key_value

Modifierでkeyとvalueを指定する場合は、keyとvalueをアンダースコア１つ(_)で区切ります。

Modifier
・パーツの構成は同じだが、見た目や動作が異なるものに設定
（色違いのボタンや非活性のタブ、コンテンツの背景の一部変更etc.）

7.英語苦手だから結局クラス名に困るよ？

ボキャブラリーが無いとやっぱりclass設計は辛いです。
なので、よく使う単語をまとめました。

- Block -

単語の例	使いどころ(意味)
wrapper , wrap	全体or特定の範囲
content , contents	コンテンツ
container , page	全体(を囲む)
section	セクション
home	トップページ
group	グループ
catch	キャッチフレーズ
hero	メイン画像
description(desc) ,summary	概要
introduction(intro)	前置き
information(info) , announce	お知らせ
feature	主要部分

- Element -

単語の例	使いどころ(意味)
head	ヘッダー
body	ボディ
foot	フッター
inner	内側
outer	外側
title	タイトル
heading	見出し(表題)
lead	案内
list , menu	一覧
item	項目
column(col)	縦列
caption	補足説明
avatar	人物画像
feature	特徴画像
next	次
previous	前
tel	電話
address	住所
date	日付
time	時間
cat , category	カテゴリー
tag	タグ(識別)
overlay	上書き
mask	覆い隠す
text	テキスト
delimiter	範囲、境界線
separator	範囲を分離
divider	範囲をグループ化

- Modifier -

単語の例	使いどころ(意味)
alert , warning , danger , caution	注意、警告
error	間違い
success	成功
small	小さい
medium	中間
large	大きい
huge	めちゃ大きい
reverse	反転
push	押す
pull	引く
center , middle	真ん中
offset	相殺
round	角丸
circle	円形
invisible , hidden , hide , none	非表示

leftやrightは入れ替わったときに矛盾が発生するから、できるだけ使わない方が無難です。

8.おわりに

BEMって大規模改修だけに意味があると思ってたけど、はっきりルールを定めることによって、自分だけじゃなくチームにも良い影響が出るんだなってわかりました。
ルールが無いと自分以外の誰かが見たときに「これなんやねん！」とか「どこやねんここ！」って余計な手間を減らせれる効果があるんだと思います。

今回表にした他にもまだまだ使えそうな単語があるので、次は単語だけでまとめたいと思います。