yutaponのブログスマートフォン用の表示で見るyutaponのブログjavascript界隈の興味あるネタを備忘録的に残しておく場所2014-01-19CSSのクラス名を決めるときに抑えておきたいBEMって概念css普段フロントの開発ばかりやってるので、たまにはCSSのネタを。CSSのidとかclassとかの命名って難しいです。適当につけてると破綻してくる。そこでBEMを覚えておくと命名に規則性を持たせることができます。結論からいうと、完全にBEMで作るのは現実的ではないかなと感じてます。いう概念があるから参考にして使うってのがいいと思います。BEMとは?BEMって何?はこちらの記事がとてもわかりやすかったので参考にしてみてください。意識した命名規則のことを指すことにします。</div></header>↓こうなるみたいです。</div></header>元のソースでは単語をハイフンで区切ることで何となく命名してますが、BEMっぽくしてみた方では命名から明確な意図を読み取れるようになります。Modifireの順に単語を並べます。クラス名を記述する場合は以下のようになります。最大3つの要素から命名されます。各要素が何を表すかを簡単に補足しておくとBlock要素の集合Element具体的な要素ModifireElementの修飾といった感じです。例を出して設計してみます。フォームの送信ボタンにスタイルを当てるときにBEMを使ってみるとクラス名はこんな感じに設計できます。{}クラス名を見ただけで、それがどんな効果を持つのか想像できそうですよね。BEMの短所BEMに則って設計するとクラス名がやたら長くなります。スマホ向けサービスみたいな少しでもファイルサイズを減らそうと頑張ってるところでクラス名とかが長いと何か違う気がします。見つけましたが以下のような問題があるようです。BEMってどうよ的な流れ。TogetterまとめBEMの使いどころ最近は複数のクラスを合わせてスタイルを当てるマルチクラス設計が流行ってます。BEMはこのマルチクラス設計と相性悪いです(クラス名長くて可読性落ちたりするので)。こちらの記事でも言及されてますが、シングルクラス設計とBEMは相性が良いみたいです。今どきのフロントエンドの人は生のCSSを書くことはほとんどなくなっていて、CSSプリプロセッサを使って開発しています。CSSプリプロセッサのextendとかmixinとか使い倒すことで柔軟な設計が出来るんじゃないかと感じてます。large"></div>要は小さい部品を組み合わせて適切なスタイルを当てるって手法です。シングルクラス設計にもこの手法は適用できます。id="blog-title"></div>出力されるCSSはこのようになります。1.5em;}要は小さい部品を組み合わせる場所をHTML側でするのか、CSS側でするのかの違いです。シングルクラス設計だとしても、スタイルを小さい部品としてたくさん用意して合成して出力してしまえばいいんです。これってオブジェクト指向言語でいうextendsとかimplementsに似てますね。気になったら調べてみましょう。ちなみに↑の例で、mixinで小さい部品を作ったのは出力されるCSSのサイズを小さくするためです。下の例はextendを使った場合です。出力されるCSSがmixinのときより冗長になっているのがわかります。1.5em;}おわりにBEMの話してたら脱線してOOCSSになってた。Modifireを意識するアンスコ2つ、ハイフン2つの区切りは意図が伝わりやすいけど、この文法にこだわる必要はないです。(1)月別アーカイブスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。