サイト制作に関するメモ書き

HOME > HTML・CSS > CSSの命名規則『BEM』の使い方

CSSの命名規則『BEM』の使い方

BEMの考え方や命名規則などを調べてみたのでメモしておきます。

BEMについて

BEMはBlock、Element、Modifierの頭文字を繋げたもので、CSSの開発手法の1つです。
要素をBlock(親要素)、Element(子孫要素)、Modifier(派生)の3つに分類して考えます。

BEMのメリット

BEMを使うことのメリットとして、以下のような点が考えられます。

  • コードの再利用を行いやすい
  • 作業スピードの向上
  • チームで開発する場合に認識を共有しやすい

パーツのコンポーネント化ができるため、他のページでパーツを流用するなどのコードの再利用を行いやすくなります。

作業スピードに関しては、命名規則がルールとして決まっているため、制作者が命名規則などで悩む時間を減らすことができます。
最初にBEMの使い方を覚えるコストがかかりますが、1回覚えてしまえば様々な案件で使用できます。

複数人で作業を行う場合でも、命名規則が統一されるため、他の制作者のコードの理解がしやすくなります。
また、制作途中でメンバーが追加された場合でも、ルールが統一されていることですぐに作業にとりかかることができます。
 

BEMの使い方

サンプルとして、簡単なボタンを作成してみます。

HTML

<div class="button">
	<a href="" class="button__link">通常のボタン</a>
</div>
<div class="button button_wide">
	<a href="" class="button__link">サイズの大きいボタン</a>
</div>
<div class="button">
	<a href="" class="button__link button__link_primary">色違いのボタン</a>
</div>

CSS

.button {
	width: 180px;
	display: inline-block;
	margin: 5px;
	text-align: center;
}
.button__link {
	display: block;
	border-radius: 5px;
	padding: 10px;
	color: #ffffff;
	text-decoration: none;
	background: #333333;
}
.button_wide {
	width: 300px;
}
.button__link_primary {
	background: #3498DB;
}

3種類のボタンを作成しました。
BEMの命名規則のデモページ

このサンプルでは以下の4つのclassが使用されています。

  • .button
  • .button__link
  • .button_wide
  • .button__link_primary

Block

Blockはページ内で使用するパーツ(コンポーネント)の親要素で、サンプルの.buttonが該当します。
ElementやModifierはこのBlockを基点にして作成されます。

Element

ElementはBlockを構成する要素で、サンプルの.button__linkが該当します。
Blockを構成する要素とわかるように、.Block__Elementのようにアンダーバー2つ(__)で繋ぐ命名規則になります。

Modifier

ModifierはBlockやElementのバリエーション違いの要素で、サンプルの.button_wideと.button__link_primaryが該当します。
Blockのバリエーション違いの場合は.Block_Modifier、Elementのバリエーション違いの場合は.Block__Element_Modifierのようにアンダーバー1つで繋ぐ命名規則になります。
 

MindBEMding

MindBEMdingはBEMから派生した命名規則です。
日本語の翻訳版はこちら

MindBEMdingの場合、以下のようにElementをアンダーバー2つ(__)で繋ぎ、Modifierをハイフン2つ(–)で繋ぐようにします。

.block {}
.block__element {}
.block--modifier {}

アンダースコアとハイフンを2つ使う理由は、ブロックをハイフンで区切るようにするためです。

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

最初のサンプルをMindBEMdingで記述する場合、以下のようになります。

HTML

<div class="button">
	<a href="" class="button__link">通常のボタン</a>
</div>
<div class="button button--wide">
	<a href="" class="button__link">サイズの大きいボタン</a>
</div>
<div class="button">
	<a href="" class="button__link button__link--primary">色違いのボタン</a>
</div>

CSS

.button {
	width: 180px;
	display: inline-block;
	margin: 5px;
	text-align: center;
}
.button__link {
	display: block;
	border-radius: 5px;
	padding: 10px;
	color: #ffffff;
	text-decoration: none;
	background: #333333;
}
.button--wide {
	width: 300px;
}
.button__link--primary {
	background: #3498DB;
}

MindBEMdingのデモページ
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP