【CSS設計】SMACSSとBEMを少しアレンジ

全てがアレンジではないが、ところどころ変えてみた。
自分のための覚書。

レイアウト

.l- を使う。
また、id でなく class 名にする。
（同じ部分を他の頁でも使いまわしたりすることもあるので。）

BEM

Elementは__じゃなく_で書く

ただし、Modifierの -- を - にはしない。

理由

誰かが書いたコードを追記する際の混乱を防ぐため。
自分は名前をつけるときsessionDetailとキャメルケースを好んで使うが、人によってsession-detailのように-を使うことがある。
（_も可能性としてはあるが、-よりは低いように思う）

長い要素名は短縮する

contentBox_nameArea の下 name kana 要素を追加するとき。

index.html

<div class="contentBox_nameArea">
    <p class="contentBox_nameArea_name"></p>
    <p class="contentBox_nameArea_kana"></p>
</div>

としてもよいが、長い。
なので

index.html

<div class="contentBox_nameArea">
    <p class="cB_nameArea_name"></p>
    <p class="cB_nameArea_kana"></p>
</div>

と頭文字を利用して略す。

追記：ネストを深くしすぎない

１つ前の「長い要素名は短縮する」を削除した理由でもある。
詳細度の高いCSS（Sass）はやめたほうがいいと書いたが、BEMでも同じ。
上記のようなコードはDOMに依存しているため、レイアウトを少しでも変更するとクラス名も変更しなければならなくなる。
ネストの深いBEMでクラス名をつけてしまうのなら、CSSでDOMに依存しないクラスを作ったって意味がない。