CSSをBEM/MindBEMdingの命名規則で書いてみる

スポンサーリンク
【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

CSS のコーディング規約やセレクタの命名規則など、何か分かりやすく書く方法はないものかと考えて調べたところ、BEM とそれを改良した MindBEMding というCSSの書き方ルールが良さそう。BEM と MindBEMding については、以下の記事等がとても参考になりました。ありがとうございます。

BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号
MindBEMding

スポンサーリンク

BEM/MindBEMding の基本

BEM は、Block, Element, Modifier の頭文字で、HTML/CSS の構成要素を三分類するのが基本的な方針。

Block(ブロック) : ルートとなる Block 要素
Element(子要素) : Block に属する子要素
Modifier(修飾子) : Block, Element に修飾を追加した要素

MindBEMding による各々構成要素の CSS クラス名の命名規則は、以下のようになる。

MindBEMding のサンプルを参考にしたところ、Block, Element は名詞、Modifier は名詞あるいは形容詞で命名するのが良さそうです。役割を考えると、まあそうなるかと思います。

サンプルコードを書いてみる

早速ですが、BEM/MindBEMding に則って、HTML と CSS のサンプルを書いてみます。サンプル見るほうが理解早いと思いますので。よくある以下のような ul, li タグによるメニューリスト。

HTML

CSS

ちょっと適当なサンプルではありますが、ここでは、HTML のクラス名を複数指定するマルチクラスのスタイルで書いてみました。HTML の3番目の li 要素で、menu__item, menu__item–emphasized の2つのクラスを指定している。

サンプル確認 → Bootstrap example code

HTML/CSS におけるマルチクラス/シングルクラスのパターンについては、以下参照。
About HTML semantics and front-end architecture | en.ja Article

Sass + シングルクラスな書き方

冒頭で紹介した、BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号 で書かれているのと同様に、私も HTML/CSS のクラス管理はシングルクラスな書き方のほうが好きです。

HTML はただですらゴチャゴチャになりやすいので、さらにクラスを複数ずらずら指定して見通しが悪くなるのが嫌いなのと、できるだけ CSS 側で一元管理したいのが理由。

ただし、ここはデザインの柔軟性を重視したり、プロジェクトの規模次第ではマルチクラスのほうが効率が良いという意見も多いので(むしろそちらが多いかも)、どちらのパターンを採用するかは事前に検討して決定する必要があるかと思います。以下エントリーがとても参考になる。

Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | NET BIZ DIV. TECH BLOG

ということで、以上を踏まえた上で BEM/MindBEMding スタイルでのシングルクラスな書き方です。

HTML

CSS

サンプル確認 → Bootstrap example code

先ほどとの違いは、HTML で3番目の li 要素のクラス指定が menu__item–emphasized の1つのみになっている。ただし、こうすると CSS 側で、.menu__item–emphasized に menu__item と同じスタイルを適用させなければいけない。.menu__item–emphasized の文字列を2回書いてて DRY 原則に反しますね。

これは、CSS を Sass を使って書くと解決できる。

Sass

Sass の extend を使うことで、DRY 原則の違反がなくなりました。ちなみに Sass → CSS への変換は、SassMeister | The Sass Playground! で確認できます。

さっと BEM/MindBEMding な HTML/CSS のスタイルを試してみましたけど、かなり気に入りました。BEM/MindBEMding + Sass + シングルクラスな書き方が、私は好みです。しばらく、このスタイルで HTML/CSS を書いていこうと思います。

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)
  • 2件のコメント
  • OsaKanamo

    Thank you for your reply.
    As I added this your blog to my RSS , I will enjoy your blog immediately without overlooking due to RSS notification.

    Although I do not know programming at all , I can understand your effort to make your service.

    Thank you for making good service!

    • taka

      Oh, I appreciate you adding my blog to your RSS.
      That’s right. RSS is very useful to follow your favorite blogs and websites.

      > Thank you for making good service!
      It’s my pleasure!
      Your words encourage me to make my services to be better.
      Thank you so much for your kind words.

Leave Your Message!