BEMを参考にした書き方

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

BEMとは

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

何がいいのか？

###以下のことが避けられる

タグ直指定や!important

.css

p {
  color: #ff0000;
}
.text {
  color: #ff0000 !important;
}

style属性などでの指定も。。。

.html

<p style="color: red;">テストです</p>

深すぎる入れ子問題でcssの修正に時間がかかる

.html

<div class="wrapper">
  <div class="box">
    <div class="text-box">
    <p class="text">テキストです</p>
    </div>
  </div>
</div>

.css

.wrapper .box .text-box .text {
  color: #ff0000;
}

パーツを使い回しすると思わぬ事態に。。(javascriptなど)
初見の人がわからないクラス名だったり、探すのが大変だったり。

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

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

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

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

block...一つのパーツ。例で言うと画像、タイトル、説明文の集まりがblock。
- webサイトはこのblockが集まり構成される。
- blockには作成するパーツのわかりやすいクラス名をつけます。

.html

<div class="contentBox"></div> /*　独自ルールとして単語つなぎはキャメルケースにしています。*/

element...blockを構成する要素
- elementの集まりでblockが成り立つ。
- elementに関してはblockのあとにアンダースコア2つで繋げます。

.html

<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つでつなぎます。

.html

<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>

こうしてしまうとクラス名が長くなりすぎてしまい、作成するものによっては逆に混乱してしまいます。
こうする場合はパーツパーツを細かくきり、合わせることをオススメします。

.html

<div class="block">
  <p class="block__element">
    <span class="block2">テキスト</span>
  </p>
</div>

projects

上記ではbemの書き方について説明しましたが、
これに合わせてflocssを取り入れるとより見やすいコードになります。

次の例では
・トップページ
・利用規約
・お問い合わせ
のページが存在するものとしています。

case

同じパーツを複数箇所(複数ページ)で使う必要がある場合があります。
例えば、トップページでは背景が赤いboxコンポーネント、利用規約では　背景が青いboxコンポーネントなど
ページごとで同じコンポーネントでも、ちょっと違うデザインのコンポーネントを使いたい時があります。
そのような時は、modifierで対応するかと思いますが、
そのページでしか使われないようなデザインだった場合などは、トップレベルにそのページ専用のクラスを用意し、
その配下のコンポーネントは「これ」と設定してあげることで可読性が上がっていきます。

トップページの場合

トップページでboxコンポーネントを使いたい場合です。

.html

<div class="top">
  <div class="box">
    <div class="box__title">タイトル</div>
  </div>
</div>

.css

.top .box {
  background: #ff0000;
}

projectsまとめ

上記のような感じで作れます。
とはいえ、基本的にコンポーネントのデザインに関するものは全てmodifierで作成した方が、混乱は少なくなるかと思います。

上記のようにページ単位でstyleを調整するものは「コンポーネントの余白間」に限定したりすると
大きな混乱は生まれないので意識してみてもいいかもしれません。