BEM記法：独自ルールの設定

#BEMの基本的なルール
BEM記法に関しては既にたくさんの記事がありますので。そちらを参照下さい。

一番詳しいCSS設計規則BEMのマニュアル
HTML・CSSの設計にBEMを取り入れてみよう！

#BEMの問題点

• 基本的な命名規則に従うだけでは、クラス名が統一感を欠きやすい。（クラス名から直感的にサイト構造をイメージしづらくなりやすい）
• サイト規模が大きくなった際、重複しないクラス名を考えるのに時間がかかる。

#独自ルールの設定
基本的な命名規則に従うだけではなく、独自にルールを設定することで直感的にサイト構造をイメージできるようになる。（同時に、場当たり的にクラス名を考える時間も省略できる。）

##Block
１．セクションのクラス名を接頭辞にする。

<section class="top-sec">
    <div class="top-contents">
        <h2 class="top-contents__title">タイトル</h2>
    </div>
</section>

／／　理由：ブロックが属しているセクションがスグにわかる。且つ、クラス名の重複を防ぐ。

２．<div>に与えるクラス名を決めておく(<div>専用のクラス名を用意する)。

<section class="top-sec">
    <div class="top-bottom">
        <div class="top-bottom-contents">
            <p class="top-bottom-contents__text">テキスト</p>
        </div>
    </div>
</section>

／／　理由：contents / box, upper / bottom, up / down , right / left など、<div>専用のクラス名をあらかじめ決めることで、クラス名に統一感が生まれる。

３．<ul>の様に子要素を必ず含むhtmlタグは、そのままクラス名として使用する。

<section class="price-sec">
    <ul class="price-ul">
        <li class="price-ul__li">1,000yen</li>
        <li class="price-ul__li">2,000yen</li>
        <li class="price-ul__li">3,000yen</li>
    </ul>
</section>

／／　理由：<ul>や<table>は親要素に必ず何らかのブロック要素を持つ(接頭辞にセクション名が付く)ため重複する可能性は低く、あえてクラス名を考える必要はない。

##Element
１．あらかじめhtmlタグに対応したクラス名を決めておく。

<section class="flow-sec">
    <div class="flow-upper">
        <h3 class="flow-upper__title">タイトル</h3>
    </div>
    <div class="flow-bottom">
        <img src="img/www.jpg" alt="" class="flow-bottom__img">
        <p class="flow-bottom__text">テキスト</p>
    </div>
</section>

／／　理由：<p>は「text」、<img>は「img」のように決めておけば直感的にhtml構造を把握でき、クラス名を考える手間も省ける。

##Modifier
Modifierに関しては独自ルールを設定していません。

#まとめ
以上、ちょっとしたルールですが、独自ルールを定めず闇雲にクラス名を付与していくとスタイリングする際に混乱しやすいので、自分が運用しやすいルールをあらかじめ設定しておくと良いのかもしれません。