フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

BEM

BEMとは

  • block, element, modifierの頭文字
  • Yandexで発案されたフロントエンドの命名手法
  • CSSのクラス名に高い透明性を与え、他の開発者に意味を伝えやすくする
  • 厳格で情報量が多いだけでなく、巨大なプロジェクトに適した命名規約である

BEMの命名規則

Block

BlockはElementとModifierの集合です。

検索フォームBlockの例
スクリーンショット 2018-12-08 14.37.09.png

Element

ElementはBlockを構成する要素です。

検索フォーム内のElementの例
スクリーンショット 2018-12-08 14.37.16.png

Modifier

Modifierは、BlockまたはElementのバリエーションの違いです。
Searchボタンが押された際の振る舞いなどを表現するのがModifierになります。

検索フォームないのModifierの例
スクリーンショット 2018-12-08 14.37.16.png

BEMの記法

/*
Blockに対するCSSセレクタ
2語以上の命名にしたい場合は「-」を用いる
*/
.block {}
.block-name {}

/*
Elementに対するCSSセレクタ
BlockとElementを「__」で繋ぐ
*/
.block__element {}

/*
BlockのModifierに対するCSSセレクタ
BlockとModifierを「_」で繋ぐ
*/
.block_modifier {}

/*
Elementに対するCSSセレクタ
BlockとElementを「__」で繋ぎ、ElementとModifierを「_」で繋ぐ
*/
.block__element_modifier {}

[紹介元] CSSタグが付けられた新着記事 – Qiita BEM

コメント

記事に戻る

コメントを残す