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] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

[HTML] ルビを振る方法

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