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] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

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

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

[CSS] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …