BEM記法を勉強して引っかかったところ

はじめに

本記事はHTML/CSS初心者である筆者がBEM記法を見よう見まねでやった結果、ルール違反となってしまった書き方とその理由、どう書くべきだったのかをまとめたものです。BEMについて知らない初心者の方でも基礎部分の解説を一緒に掲載しているので読んでいただけると幸いです。 BEMの基礎について読み飛ばしたい方は[こちら](#modifierをelementの中に入れておらずルール違反となった書き方)

##BEMとは##

BEM(Block Element Modifier)はCSSのクラス設計と命名にかかわってくる記法。
Blockの中にはElement、Elementに派生があればModifierを入れ子構造で設計し、クラス管理を容易に行うことができるよう考えられた記法である。

・BEMの基本的な書き方
BEMのクラス命名では**Block__Element--Modifier**といった書き方をとる。
__(アンダースコア二つ)はBlockとElementをつなぐ際に使われる、アンダースコアである理由は「下層」を表すため。
--(ハイフン二つ)はModifierを書く際に使用される、BlockとElementのバリエーション違いを表す際に使うので「対等」を意味する。

以下にBEM記法で設計したHTML/SCSSの例を示す。

HTMLファイル

<div class="content">
  <p class="content__text">BEMテスト</p>
  <button class="content__button content__button--large">大きいボタン</button>
  <button class="content__button content__button--small">小さいボタン</button>
</div>

SCSSファイル

.content {
    width: 600px;
    height: 400px;
    padding: 1em;
    border: 2px solid #000000;

    &__text {
        font-size: 24px;
        font-style: italic;
    }

    &__button {
        padding: 1em;
        border: 2px solid #000000;

        &--large {
            width: 200px;
            height: 100px;
        }

        &--small {
            width: 100px;
            height: 50px;
        }
    }
}

Block　一つのくくりであり、以下のElement,Modifierの起点になるもの、一つのコンポーネント
Element　Blockを構成するための要素　　例：画像やテキスト、ボタン
Modifier　Block,Elementのバリエーション違いのもの　　例：赤い、小さい、静かな

##ModifierをElementの中に入れておらずルール違反となった書き方##

HTMLファイル(修正前)

<!--...略-->
<div class="hobby">
   <h2 class="hobby__text--red">趣味:釣り</h2>            <!--この行が問題-->
   <p>主にイカ釣りをしています！写真は2年くらい前のもの...</p>
　 <img class="hobby__picture" src="image/ika.jpg">
</div>
<!--...略-->

Blockの中に直接Modifier付きのElementが入っていることが問題である。
どうしてこのように書いてしまったかというと、hobby__text(Block__Element形式)はhobby__text--red(Block__Element--Modifier形式)の中に含まれており、他の派生を作成する予定がなかったためわざわざ外側のElementは要らないのではと判断してしまった。

これはファイルフォルダのイメージで見ると、一つのフォルダの中に画像、コードなどが乱雑に置かれたようになってしまいBEMの長所が生かされなくなってしまう。
そのため動かないわけではないがBEM記法で設計する以上、避けるべき書き方であると分かった。

↓本来はこうするべき

HTMLファイル(修正後)

<div class="hobby">
  <div class="hobby__text">                               <!--追記した部分-->        
    <h2 class="hobby__text--red">趣味:釣り</h2> 
    <p>主にイカ釣りをしています！写真は2年くらい前のもの...</p>
  </div>                                                  <!--追記した部分-->
　<img class="hobby__picture" src="image/ika.jpg">
</div>

Block__Element--Modifier形式のクラス名を定義するには必ず派生元であるBlock__Element形式で書かれたクラスが必要である。
つまりBlock__ElementはBlockの中にいなければならない！ということでもある

##Elementの中にElementを定義してしまいルール違反となった書き方##

リンク付きの画像を表現するとき、HTMLではimgタグをaタグで囲む。この場合どちらもBlock内の要素と考えられるためElementとして定義したく、以下のコードの__linkというElementの中に__pictureや__textというElementを入れ子で書きたかった。

HTMLファイル(修正前)

<div class="favorite">
  <div class="favorite__link">
    <a href="#">
      <img class="favorite__link__picture" src="image1.jpg">
    </a>
    <div class="favorite__link__text">画像1テキスト</div>
  </div>
  <div class="favorite__link">
    <a href="#">
      <img class="favorite__link__picture" src="image2.jpg">
    </a>
    <div class="favorite__link__text">画像2テキスト</div>
  </div>
  <div class="favorite__texts">
    <p>画像はそれぞれ実際に撮影したものです！</p>
    <p>画像をクリックすると地図にジャンプ</p> 
  </div>
</div>

実はElement内に別のElementを定義してはいけないというBEM記法のきまりがある。
そのため以下のコードのように編集した。

favoriteのBlock内部に別Blockのfavorite-linkを作り、その内部に__pictureや__textというElementを定義する設計とした。

HTMLファイル(修正後)

<div class="favorite">
  <div class="favorite-link">
    <a href="#">
      <img class="favorite__link__picture" src="image1.jpg">
    </a>
    <div class="favorite__link__text">画像1テキスト</div>
  </div>
  <div class="favorite-link">
    <a href="#">
      <img class="favorite__link__picture" src="image2.jpg">
    </a>
    <div class="favorite__link__text">画像2テキスト</div>
  </div>
  <div class="favorite__texts">
    <p>画像はそれぞれ実際に撮影したものです！</p>
    <p>画像をクリックすると地図にジャンプ</p> 
  </div>
</div>

※サイト、画像のリンクや画像テキストの内容は編集しています

設計の際にはいくつBlockが必要なのかを考えてから設計しないと手戻りやリネームなどの面倒な作業が増えてしまう恐れがある。

##参考文献##

BEMの勉強で参考にさせていただいた記事
[一番詳しいCSS設計規則BEMのマニュアル]
(https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1)

参考にした本
『Web設計者のためのCSS設計の教科書』　著：谷　拓樹