CSS コーディング

BEM/mindBEMdingを使ったCSSの書き方

BEM/mindBEMdingを使ったCSSの書き方を紹介します。

BEMを使用したもっとも有名なCSS設計手法であるmindBEMding

CSSにおけるBEM/mindBEMdingとは

BEMはCSSの書き方のルールです。
HTMLの要素は以下3つのいずれかに当てはまるという考え方です。
「Block」
「Elements」
「Modifier」

上記3要素の頭文字を取ってBEMという名前がついています。各要素については後述します。

mindBEMdingとは

mindBEMdingはBEMの概念を利用したCSSの書き方のルールです。CSS設計手法、CSS命名規則などと呼ばれる手法の一つです。

どのようにCSSを書いていくか、どのようにclass名を付けていくかなどを取り決めたものです。

MindBEMdingをBEMと呼ぶことが多いです。

なぜBEMを使うのか

  1. class名を広範囲で使いまわすことがなくなるので、CSSを修正したとき意図しないところまで変更されてしまう事がなくなります。
  2. ルールを定めることで複数人でコーディングを行ったときにも、それぞれバラバラの書き方にならず統一性が生まれるためメンテナンス性も上がります。
  3. もっとも有名は命名規則のためプロジェクトメンバーが変わっても対応しやすいです。

BEMのデメリットとしてはclass名が長くなることがあげられます。

BEM(mindBEMding)を使ったCSSの書き方

Block,Elements,Modifierそれぞれにルールがあります。

Block(大枠)

Blockは大枠になる部分、ナビゲーションや、入力フォーム、ヘッダーフッターなど。
Blockは独立していて、再利用することができます。
基本1単語で命名します

Elements(部品)

Elementsは、Blockのなかに配置される部品です。
Blockの中でのみ存在することができます。

Blockにアンダースコア2つつけ、つづけて1単語をつけます。

Modifier(状態)

Modifierは、BlockとElementの見た目や動きが異なるもの。色違いなどちょっとした違いがある場合に使用する。

BlockもしくはElementにハイフン2つにつづけて1単語

BEM(mindBEMding)その他のルール

単語をつなげたい場合はハイフン一つ

1単語で表しきれない場合は単語をハイフンでつなぎます。

特にModifierは1単語ではわかりにくい場合が多い

CSSはclassに指定する(要素セレクタやidには指定しない)

CSSは基本的にclassに対して指定します。要素セレクタやid属性には指定しません。

Elementの表記

block__element__elementのような書き方はできません。見た目もわかりにくくなります。
例えば以下のようには出来ません。

新しくにBlockを切る
Blockの中にBlockを入れることは可能です。

もしくは別名のElementとして用意します。

以上、BEM/mindBEMdingの解説となります。

BEM/mindBEMdingは全てに従うというよりは人それぞれ独自のルールを用いて運用していることが多いです。自分の使いやすいようにアレンジしてみるのも良いと思います。

スポンサーリンク

-CSS, コーディング

© 2020 まめしばweb Powered by AFFINGER5