BEMというよりクラス名をわかりやすく区切りたい
メリークリスベム。
BEM Advent Calendar 2013 の14日目の記事です。
わざわざBEMを持ちださなくても、クラス名には
- 可読性を高めるためだけの区切り
- 親子間を示す区切り
- 修飾句との区切り
の3種類の区切りが発生するこはままあることかと思います。
2つ目の区切りのあるクラスは、親に依存したパーツであったり、3つ目の区切りのあるクラスは、拡張されたパーツであったりするため、3種類の区切りを区別させたい欲求を持ったことあるマークアッパーは少なくないんじゃないかと思います。
いつだか僕はこれを解決するために
- 親子間は ハイフン2つ ・・・ parent--child
- 修飾句は ハイフン1つ ・・・ element-modifire
- 可読性を高めるための区切りはキャメル ・・・ className
というBEMに似た命名規則を夢想まではしましたが、こんなの他人が見たら、キモがられるだろうなと思って、そっと胸にしまいました。
今年の6月。
サイバーエージェントの方々が僕の住む静岡まではるばるやってきて貴重な話をしてくださり、その中でBEMが紹介されました。ずっと胸に溜め込んでいた3種類の区切りを区別したい欲求が顔を覗かせましたが、自分の夢想した以上のキモさと厳格そうなルールを前にすぐに引っ込めてしまいました。
そして今月12月。BEMアドベントカレンダー。
実のところ覚めた目で、BEMアドベントカレンダーの記事を追ってましたが（覚めていても追っているのは諦めきれないからですが）、12日目の記事 実践 めんどうくさくない BEM - ダーシマ・ヱンヂニヤリング を読み、自分が感じでいる窮屈さに対してもっと自由に積極的に解決していこうと勇気付けられた気がし、3種類の区切りを区別してクラスを書いていきたいと思うに至りました。
めでたしめでたし。
今んとこはダーシマ・ヱンヂニヤリングさんがこの記事で紹介してる
blockName-elemName_modifier
の命名規則がいいなかとと思ってます。
明日15日は thleap さんです。
