CODING

BEMを意識しよう

投稿日:2019年10月30日 更新日:


どうも、べ〜やんです。

今回は、代表的なCSSの設定規則のBEMの基礎を紹介します。

HTML、CSSに慣れてきた方やクラス名で迷ってしまう方、チームでプロジェクトを進めたい方におすすめです。





BEMとは

BEM(ベム)とは、Block(ブロック)・Element(エレメント)・Modifier(モディファイア)の略で代表的なCSSの設定規則です。

クラス名の命名のルールやCSSの記述のルールを決めているものです。


使い方

命名の規則はblock__element–modifierが基本の形です。


セパレーター

基本的なセパレーターの使い方を紹介します。

BlockとElementの間はアンダースコア( _ )2つで繋ぐ。

ElementとModifierの間はハイフン( – )2つで繋ぐ。

複数の単語を繋げてBlock名やElement名をつける場合はハイフン( – )1つで繋ぐ。

複数の単語を繋ぐ場合はキャメルケースを使用してもOK、個人的にはこっちが好きです。main-content → mainContentなど。

上記以外でも以下の3つが区別できていればOKです。

  1. BlockとElementとの区切り
  2. BlockまたはElementとModifierとの区切り
  3. 複数の単語を繋ぐ区切り

Block

Blockはページを構成する大きな括りのことです。

ページはたくさんのBlockできている。

例:ヘッダー、フッター、ナビゲーション、商品説明など。

ページ全体のヘッダーを1つのBlockとしてpage-headerというクラスを与えるなど。

<div class="page-header">
  
</div>

Element

ElementはBlockを構成する要素です。BlockのないElementは禁止されています。

BlockはたくさんのElementからできている。

例:ヘッダーの中のロゴ、ナビゲーションの中のメニュー、商品説明の中の商品名など。

ヘッダーの中のロゴにpage-header__logoというクラス名を与えるなど。

<div class="page-header">
  <h1 class="page-header__logo">
     <img src="">
  </h1>
</div>

Modifier

ModifierはBlockやElementの状態を表すもの。

例:メニューの1つだけ色を変えるなど。

複数のメニューの中で1つだけ青にするのにheader-menu__item–blueというクラス名を与えるなど。

またModifierはBlock_key_valueやElement_key_valueのようにkey(名前)とvalue(値)とアンダースコア( _ )を使い同時に複数使用する事もできます。

例:list_type_check、list_type_discなど。

<ul class="list list_type_check">
  <li class="list__item">リスト1</li>
  <li class="list__item list__item--blue">リスト2</li>
</ul>
<ul class="list list_type_disc">
  <li class="list__item">リスト1</li>
  <li class="list__item list__item--blue">リスト2</li>
</ul>

メリット

  • チームでの開発がしやすい。
  • メンテナンスがしやすい。
  • クラス名だけでどの部分を指定しているのか理解できる。
  • コードの再利用性が高い。

デメリット

  • クラス名が長くなる。

おわりに


今回は、代表的なCSSの設定規則のBEMの基礎を紹介しました。

他の細かいルールもありますので、また別の機会に紹介します。



-CODING
-

執筆者:


comment

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

関連記事

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …

[HTML] ルビを振る方法

どうも、べ〜やんです。 今回こんかいは、HTMLでルビを振ふる方法ほうほうを紹介しょうかいします。 ルビを振るとは ご存知の方がほとんどだと思いますが、ルビとは(ふりがな)のことです。 なんで(ふりが …

[CSS] CSSで吹き出し風デザイン・三角形

どうも、べ〜やんです。 今回は、三角形の作り方と吹き出し風のデザインの作り方を紹介します。 三角形がぴょこって付いているアレです。 三角形 まずはCSSで三角形を作る方法をざっくり紹介します。 三角形 …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[HTML] 表を作るtable

どうも、べ〜やんです。 今回はHTMLでtableタグを使って表を作る方法を紹介します。 表の例 表を使う 表を使うと伝えたい情報を分かりやすく伝えることができます。 HTMLには簡単に表を作れる便利 …