- 更新日: 2015年3月19日
- HTML & CSS
CSSをBEM/MindBEMdingの命名規則で書いてみる
CSS のコーディング規約やセレクタの命名規則など、何か分かりやすく書く方法はないものかと考えて調べたところ、BEM とそれを改良した MindBEMding というCSSの書き方ルールが良さそう。BEM と MindBEMding については、以下の記事等がとても参考になりました。ありがとうございます。
BEMという命名規則とSass 3.3の新しい記法 – アインシュタインの電話番号
MindBEMding
画像付き英語辞書 Imagict | 英単語をイメージで暗記BEM/MindBEMding の基本
BEM は、Block, Element, Modifier の頭文字で、HTML/CSS の構成要素を三分類するのが基本的な方針。
Block（ブロック） : ルートとなる Block 要素
Element（子要素） : Block に属する子要素
Modifier（修飾子） : Block, Element に修飾を追加した要素
MindBEMding による各々構成要素の CSS クラス名の命名規則は、以下のようになる。
|
1 2 3 |
.block {} .block__element {} /* アンダースコア2つ区切り */ .block--modifier {} /* ハイフン2つ区切り */ |
MindBEMding のサンプルを参考にしたところ、Block, Element は名詞、Modifier は名詞あるいは形容詞で命名するのが良さそうです。役割を考えると、まあそうなるかと思います。
サンプルコードを書いてみる
早速ですが、BEM/MindBEMding に則って、HTML と CSS のサンプルを書いてみます。サンプル見るほうが理解早いと思いますので。よくある以下のような ul, li タグによるメニューリスト。
HTML
|
1 2 3 4 5 |
<ul class="menu"> <li class="menu__item">メニュー1</li> <li class="menu__item">メニュー2</li> <li class="menu__item menu__item--emphasized">強調されたメニュー3</li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.menu { list-style-type: square; } .menu__item { border-bottom: 1px solid black; } .menu__item--emphasized { font-size: 1.5em; font-style: italic; font-weight: bold; } |
ちょっと適当なサンプルではありますが、ここでは、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
|
1 2 3 4 5 |
<ul class="menu"> <li class="menu__item">メニュー1</li> <li class="menu__item">メニュー2</li> <li class="menu__item--emphasized">強調されたメニュー3</li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.menu { list-style-type: square; } .menu__item, .menu__item--emphasized { border-bottom: 1px solid black; } .menu__item--emphasized { font-size: 1.5em; font-style: italic; font-weight: bold; } |
サンプル確認 → Bootstrap example code
先ほどとの違いは、HTML で3番目の li 要素のクラス指定が menu__item–emphasized の1つのみになっている。ただし、こうすると CSS 側で、.menu__item–emphasized に menu__item と同じスタイルを適用させなければいけない。.menu__item–emphasized の文字列を2回書いてて DRY 原則に反しますね。
これは、CSS を Sass を使って書くと解決できる。
Sass
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.menu { list-style-type: square; } .menu__item { border-bottom: 1px solid black; } .menu__item--emphasized { @extend .menu__item; font-size: 1.5em; font-style: italic; font-weight: bold; } |
Sass の extend を使うことで、DRY 原則の違反がなくなりました。ちなみに Sass → CSS への変換は、SassMeister | The Sass Playground! で確認できます。
さっと BEM/MindBEMding な HTML/CSS のスタイルを試してみましたけど、かなり気に入りました。BEM/MindBEMding + Sass + シングルクラスな書き方が、私は好みです。しばらく、このスタイルで HTML/CSS を書いていこうと思います。
- – 参考リンク –
- Definitions / Methodology / BEM. Block, Element, Modifier / BEM
- BEMとは何か？
- BEMによるフロントエンドの設計 – 基本概念とルール | CodeGrid
- HTML & CSS の関連記事
- 画像がはみ出るのを防ぐCSSスタイルシート指定(モバイル・スマホ対応)
- SassとSCSSを変換するsass-convertコマンドとウェブサービス
- Twitter Bootstrapのデザインと挙動を気軽にテストできるBootplyが超絶便利！
- CSSでスクロールバーをデザイン(WebKitブラウザ)
- はてなブックマーク人気記事ブログパーツのデザイン変更
- Twitter Bootstrapで端末サイズ毎にHTML要素の表示・非表示を切り替え
- Bootstrap3をInternet Explorer8(IE8)に対応させる
- Twitter Bootstrap のカスタマイズをライブラリ本体に手を入れずに行う
- Sass の @extend で存在しないセレクタを指定する
- Rails + bootstrap-sass で submit ボタンに class, id を割り当てずに css を指定
- 初回公開日: 2015年3月18日
- 2件のコメント
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!
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.