CSS

CSSの命名規則BEMって面倒臭そうに感じてたけど使ってみると案外はかどった

2017.10.17

ネームタグ

前から何かCSSの命名規則使ってみようと思っていましたが、なかなか機会に恵まれず(面倒)いたのですが、他社のエンジニアとバージョンを共有する必要のある案件がありまして、競技の結果BEMを採用してみることにしました。

使ってみると意外に面倒ではなく、今まで命名に迷ってた点も「規則」に当てはめて行く事で案外捗りました。と言うわけで忘れる前の備忘録を兼ねてBEMを紹介します。速くコーディングが完了して、人間らしい生活が出来るかもしれません。

BEMとは

BEMは下記の頭文字をとったCSSの命名規則です。セレクター名が長くなってしまうと言う欠点はありますが、他の制作者とルールを共通化出来ることと迷わず命名できるメリットがあります。ただし迷わずには慣れが必要です!

  • Block(ブロック)
  • Element(エレメント)
  • Modifier(モディファイア)

BEMの記述ルール

BEMの記述ルールです。慣れるまではエレメントとモデファイアがごっちゃになる事はありますが、一案件通した頃にはそれも問題ない感じです。

Block ブロック名を指定します。
Element ブロック内の要素を指定します。名称をアンダースコア2つで繋ぎます。
Modifier 要素の装飾を指定します。名称をハイフン2つで繋ぎます
.Block__Element--Modifier{
  ~
}
.Block--Modifier{
  ~
}

BEMの用例

実際に使ってみた例です。

<div class="header">
<div class="header__inner">
 <div class="header__logo">
  <h1 class="header__logo-site-tit">
   h1が入ります。
  </h1>
 </div>
 <div class="header__user-act">
  <div class="header__tel">
   <p class="header__tel-no">
        <span class="header__tel-no--small">TEL.</span>000-0000-0000
      </p>
  </div>
 </div>
<!-- /header__inner --></div>
<!-- /header --></div>

実際に使ってみた印象

まず、名称が長いことはそんなに気にならないです。それよりも命名に迷わなくなるので、そちらのアドバンテージの方が大きいです。とは言え、ブロックはともかく、前述の通りエレメントとモデファイアは最初戸惑いました。とにかくモデファイアは装飾や派生バージョンって感覚と思うことにより、迷わなくなりコーディングスピードがアップしました。

とりあえずBEMにこだわらずこの手のものは積極的取り入れていこうって気になりました!

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する