Help us understand the problem. What is going on with this article?

CSS設計 BEMを使うとき

More than 3 years have passed since last update.

fだf.jpg
参照元画像

はじめに

良いCSSを書く方法として、CSS設計がいくつかあります。

その前に、そもそも良いCSSとは?
・予測しやすい
・再利用しやすい
・保守しやすい
・拡張しやすい
とのことです。

で、良いCSSを書くためのCSS設計の1つとして妖怪人間BEMがあります。
もちろん良いCSSが達成できるなら、必要なし

今回はCSS設計ルールの1つであるBEMについてまとめてみました。

BEMとは

BEMとは、Block、Element、Modifierの略語

Block ⇒ 塊
Element ⇒ 要素
Modifier(kyeとvalueで表す) ⇒ 状態(変化)

なぜBEMを使うの?

・長期間メンテナンスできる設計で、ファーストバージョンの開発をすばやくするため
・チームのスケーラビリティ
・コードの再利用性

私が使う理由は、ブロックの再利用があるかも!?と思った時にBEMを使用します。

たとえばランディングページとか
以前作ったサイト内にある、ブロックを他のサイトに利用したい時に、HTMLとCSSのブロックを抜き出しすことで再利用が簡単にできます。(継承とか諸々気にしなくて済む)

BEMを使うための必要知識

  1. Block、Element、Modifierという3つの概念の理解
  2. class名の命名ルールの理解

概念を理解して、命名ルールに基づいてコーディングをすればOK

Block、Element、Modifierという3つの概念

前提としてWebページはBlockの集まりと考える。

1. Block(ブロック)

Block

2. Element(エレメント)

Blockの構成要素

3. Modifier(モディファイア)

・BlockやElementのバリエーションの軸や、状態を表すプロパティの役割
・Modifierは名前(key)と値(value)を持ち、複数のModifierを同時に使用可能
・Blockに対するModifierと、Elementに対するModifier の2つある

Block
└ Element

<div class="search">                           <!--Block-->
  <input class="search__input" type="text">    <!--Element-->
  <input class="search__button" type="submit"> <!--Element-->
</div>

BlockとModifier
└ Element

<ul class="list  list_type_A">        <!--Block-->と<!--Modifier-->
  <li class="list__item"></li>                <!--Element-->
  <li class="list__item"></li>                <!--Element-->
</ul>

<ul class="list  list_type_B">        <!--Block-->と<!--Modifier-->
  <li class="list__item"></li>                <!--Element-->
  <li class="list__item"></li>                <!--Element-->
</ul>

Block
└ ElementとModifier

<ul class="menu">                                                                                   <!--Block-->
  <li class="menu__item"></li>                                                         <!--Element-->
  <li class="menu__item  menu__item_state_current"></li>    <!--Element-->と<!--Modifier-->
  <li class="menu__item"></li>                                                         <!--Element-->
</ul>

class名の命名ルール

Block、Element、Modifierそれぞれの区切りに、
一貫したセパレーター 「_」 「_ _」 「-」を使用します。

基本ルールは3つ

  1. BlockとElementとの区切り
  2. Block(or Element)とModifierとの区切り、Modifierのkeyとvalueの区切り
  3. BlockやElement名を、2つ以上の単語で表す場合の単語と単語との区切り

※大事なのはセパレーターの種類によって
・BlockとElementの区切りなのか?
・Modifierの区切りなのか?
・ただの単語の区切りなのか?
が、はっきり判別できるようにすること。

まとめ

再利用するかも!?と感じたらBEMで組むが今のところの使用用途です。
他にこうゆう理由で私は使用しますとかあれば教えて頂けると嬉しいです。

参考記事

BEM

BEMを参考にしたCSS設計
BEMによるフロントエンドの設計

良いCSS設計について知る

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
より良いCSSを書くための様々なCSS設計まとめ

ko8@github
駆け出し雑魚プログラマー ”習うより慣れろ” 
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away