🍣

BEMとは

2023/02/26に公開

CSS

HTML

tech

BEMとは

BEMはBlock・Element・Modifierの3つの要素からなるCSSの命名規則

B…Block（ブロック要素）
E…Element（ブロック内の要素）
M…Modifier（変化した内容）

スタイルをブロック単位で管理することで、CSSの可読性やメンテナンス性を向上させる！！

たとえば、ヘッダーというブロック内にあるロゴという要素をスタイリングする場合、
次のようにクラス名を定義する

<header class="header">
  <img class="header__logo" src="logo.png" alt="ロゴ">
</header>

メリット

設置されたクラス名からその内容が視覚的に明確になる
そのクラス名の役割が予測しやすい
そのスタイルのスコープがブロック内で収まる
レイアウトが変わっても修正箇所が少なくて済む
修正対象箇所がすぐにわかる

BEMの主な書き方

Block…class="block名"
Element…class="block名__element名"
Modifier…class="block名__element名--modifier名"

Element名は間に「__」アンダースコア2つをつける
Modifier名は間に「--」ハイフン2つをつける

Block

Blockは一つ一つが独立したパーツとして設計
Block名は重複しない(数字の1・2などで連番をつけるようなことも避ける)
空間系のスタイルは入れない（Blockは空間に影響を及ぼすmargin,padding,positonなどのプロパティは設定しない）

書き方
その領域が何を示すのかを命名する
(見た目の状態ではなく、その領域が「何を示しているのか」がわかる様に命名)

空間の確保が必要な場合は別クラスで
かといってページB向けに、margin-top: 0の類似CSSを追加で作るのはよくない！！
どうしても空間を調整する必要がある場合は、2つ目として調整専用クラスを入れるようにする

<div class="information mt-0"></div>

.mt-0{
	margin-top: 0px;
}

Blockの中に入れ子でBlockを入れてもよい

Blockは完全独立しているから、入れ子で書いても問題はない
Blockは中に入れても外に出しても問題ない設計
意図しない影響を与えないのが、Blockの考え方

この規則が念頭にないと、その場その場で数値の違うBlockを複数作ってしまう
似たようなBlock名が並ぶと、検索して探す事になりメンテナンス性が低くなる

Element

必ずBlockの中に存在する
Element名は重複してもOK（imageやtext・boxなど一般的な名称の方が良い）
CSS上、Elementの中に入れ子でElementを入れる書き方はダメ

Elementのクラス名は、その先頭に必ず「Blockのクラス名称」を継承して書く決まりになっている！
Blockが「information」の場合、中のelementクラスは「information__element」

書き方
中に入るElement要素は、先程のBlock名の後ろに
アンダースコア2つ「__」を足しつつ、Element名をつけたものにする

<div class="information">
	<div class="information__image"></div> //image要素
	<div class="information__text"></div> //text要素
	<div class="information__text"></div> //text要素
	<div class="information__text"></div> //text要素
</div>

CSSは全て同階層で書く
レイアウトによっては、Element内に別のElementが「入れ子」で入る事がある
HTML上でElementが入れ子になるのは、全く問題ない

Elementが入れ子になっているソース

<div class="information">
	<div class="information__text">
		<span class="information__text__sub"></span>
	</div>
	<div class="information__text">
		<span class="information__text__sub"></span>
	</div>
</div>

CSS上では、Elementの要素内にElementを入れ子で書いてはいけない

子孫セレクタで書いた状態

.information__text .information__text__sub{
	//cssスタイル
}

いざ入れ子が解除された時に、修正が必要になる

Blockの子孫セレクタにもしない事！
特定コンテキストに依存しない事で、レイアウトの変化に柔軟に対応できる様になる

Modifier

- 基本はElementと同じCSS

色（color）や大きさ（large）の装飾
アクティブ、非アクティブ（active、disable）の演出
特殊な空間（margin-bottom: 0）など

Elementと同様BlockやElementの外側で使用する事はできない

書き方
Modifier要素が入る場合は、Element名に続けてハイフン「--」を足して単語をつけたものにする

<div class="information">
	<div class="information__image"></div> //image要素
	<div class="information__text"></div> //text要素
	<div class="information__text"></div> //text要素
	<div class="information__text information__text--red"></div> //Modifier要素（赤色）
	<div class="information__text information__text--blue"></div> //Modifier要素（青色）
</div>

*クラス名が長くなる
Modifierは常に、Block＋Element＋Modifierが1セットとなるクラス名
必ず先に通常のElementクラス名が入り、そのあとに続けてModifierクラス名が入る

class="information__text（Element） information__text--blue（Modifier）"
このように2つは必ず並ぶルールになる。

名称が複数単語になる場合
単語と単語の間をハイフン1つ「-」で区切る

image-list
campain-block

シングルハイフン「-」
これはElementやModifierも同様
例えばuser-areaというblockの中にuser-titleというElementをつける場合があるとする
その時のElementクラス名は「user-area__user-title」
これにModifierまでつけると「user-area__user-title--button-hover」などになる

BEMは、大規模なWebアプリケーションやWebサイトの開発に適しており、
スタイルの管理を効率的に行うことができる

しかし、BEMを適用することで、HTMLのクラス名が
冗長になる場合があるため、適度に使用することが重要！！

チートシート

https://uknow1229.github.io/zozotown/

2年前にHTMLとCSSを少し教えてもらった時に作ったサイト！
また1からその時みたいに作っているけど、忘れすぎててやばい
やっぱり講座見るだけだと全然入ってないことを痛感、、
命名規則についても理解していなかったから、
調べながらコツコツ作って慣れていこう 🥺

BEMとは

メリット

BEMの主な書き方

Block

Element

Modifier

Discussion