CSS
CSS3
フロントエンド
PORTDay 21

[フロントエンド css]BEMを参考にした書き方

BEMを参考にした書き方

今回はcssでのBEMを参考にした書き方をご紹介したいと思います。

BEMとは

  • BEMとはBlock,Element,Modifierの略で、フロントエンド設計方法のひとつです。

何がいいのか?

以下のことが避けられる

  • タグ直指定や!important
p {
  color: #ff0000;
}
.text {
  color: #ff0000 !important;
}
  • style属性などでの指定も。。。
<p style="color: red;">テストです</p>
  • 深すぎる入れ子問題でcssの修正に時間がかかる
<div class="wrapper">
  <div class="box">
    <div class="text-box">
    <p class="text">テキストです</p>
    </div>
  </div>
</div>
.wrapper .box .text-box .text {
  color: #ff0000;
}
  • パーツを使い回しすると思わぬ事態に。。(javascriptなど)
  • 初見の人がわからないクラス名だったり、探すのが大変だったり。

以上のことを踏まえた上でBEMでは...

  • コードを再利用できる
  • わかりやすいクラス名とBEMの規則のおかげでチーム開発などに向いている。
  • 修正が入った時にどこのことなのか探しやすい。

BEMの構成と説明(独自ルールも入ってます。)

冒頭でBEMはBlock,Element,Modifierの略と言いました。
それぞれをもう少し噛み砕いていくと以下のような感じになります。(コードも合わせて説明します。)
ここでは例として一つの画像、タイトル、説明文の集まりのコンテンツで説明します。

  • block...一つのパーツ。例で言うと画像、タイトル、説明文の集まりがblock。
    • webサイトはこのblockが集まり構成される。
    • blockには作成するパーツのわかりやすいクラス名をつけます。
<div class="contentBox"></div> /* 独自ルールとして単語つなぎはキャメルケースにしています。*/
  • element...blockを構成する要素
    • elementの集まりでblockが成り立つ。
    • elementに関してはblockのあとにアンダースコア2つで繋げます。
<div class="contentBox"> /*ここはblock*/
  <h2 class="contentBox__title">タイトルです。</h2> /*ここがelement*/
 <p class="contentBox__text">テキストです。</p> /*ここがelement*/
</div>
  • Modifier...状態が違うもの。
  • 作成したblockやelementに似ているが微妙に見た目が違ったり、動きが違ったりする場合、これを新規で作る必要はありません。
  • Modifierを使って既存のblockやelementを改造します。
  • Modifierはハイフン2つでつなぎます。
<div class="contentBox contentBox--backRed"> /*ここはblockとModifier*/
  <h2 class="contentBox__title contentBox__title--small">タイトルです。</h2> /*ここがelementとModifier*/
 <p class="contentBox__text">テキストです。</p> /*ここがelement*/
</div>
  • 上記のコードでは例としてcontentBoxの背景が赤色のもの、contentBox__titleのfont-sizeが既存より小さいものを用意しました。
  • こうすることで似たような紛らわしいものが増えず、コードも少なく見やすくなります。

これらをまとめると以下のようになります。

<div class="block block--modifier">
  <p class="block__element">テキスト</p>
</div>

最初の方にやりがちなこと

elementの中にelement。

<div class="block">
  <p class="block__element">
    <span class="block__element__element">テキスト</span>
  </p>
</div>
  • こうしてしまうとクラス名が長くなりすぎてしまい、作成するものによっては逆に混乱してしまいます。
  • こうする場合はパーツパーツを細かくきり、合わせることをオススメします。
<div class="block">
  <p class="block__element">
    <span class="block2">テキスト</span>
  </p>
</div>