BEMの公式ページ「Get BEM」をおおざっぱに翻訳しました。
FAQはテキスト量が多いため、改めて別記事としてまとめる予定です。
トップページ
BEM - Block Element Modifierは、フロントエンド開発で再利用可能なコンポーネントとコード共有を作成するのに役立つメソッドです。
-
導入は簡単
BEMを使用するには、BEMの命名規則を採用するだけで済みます。 -
モジュラー
独立したブロックとCSSセレクタにより、コードを再利用可能なモジュラーにします。 -
高い柔軟性
BEMを使用すると、メソッドとツールを自由に組み替えて構成できます。
まえがき
BEMは、フロントエンドのコードを読みやすく理解しやすく、扱いやすく、拡張しやすく、堅牢で明示的に、そしてはるかに厳密にする、非常に便利で強力で単純な命名規則です。
命名規則
BEMアプローチは、Webサイトの開発に参加するすべての人が単一のコードベースで機能し、同じ言語を話すことを保証します。BEMの適切な命名規則を使用すると、Webサイトに加えられたデザインの変更に備えることができます。
FAQ
- セマンティックカスタムタグを使用するのではなく、ブロック用のCSSクラスが必要なのはなぜですか。
- button.buttonのようなセレクタでタグとクラスを組み合わせることができますか？
素晴らしいFAQリストで答えを探してください。
Introductionページ
小規模のパンフレットサイトではスタイルをどのように整理するかは通常あまり大きな問題にはせず、CSS や Sass を書いています。すべてをSASSの設定で1つのスタイルシートにまとめ、次にそれを集約し、モジュールからのすべてのスタイルシートを整形して1つのパッケージにまとめます。
ただし、大規模で複雑なプロジェクトでは、コードをどのように編成するかが、少なくとも次の3つの点で効率化の鍵となります。コーディングにかかる時間、そのコードのうちどれだけの量が必要か、ブラウザに書き込む必要があるかどうかを記述します。制作チームと仕事をしているときや、高いパフォーマンスが不可欠とされるプロジェクトの場合、これは特に重要になります。
これは、従来のコードを使用した長期プロジェクトにも当てはまります（「SassとSMACSSを使用して従来のCSSを拡張および維持する方法」を読んでください - そこにSMACSSとBEMがうまく混在しています）。
メソッド
肥大化するCSS問題はTwitter、Facebook、Githubのような大規模プロジェクトには付き物です。
しかし、他のプロジェクトでも急速に「巨大なCSSファイル」状態になることがあります。
CSSの容量を縮小し、プログラマ間の協力を組織し、そして大規模なCSSコードの基盤を維持することを目的としたメソッドは一つではありません。その一部と特徴を以下に示します。
-
OOCSS
コンテナとコンテンツをCSSの「オブジェクト」で分離する。 -
SMACSS
CSSルールのための5つのカテゴリーでCSSを書くためのスタイルガイド。 -
SUITCSS
構造化クラス名と意味のあるハイフン。 -
Atomic
スタイルを原子的な、または不可分な部分に分割する。
なぜ他のメソッドよりBEMなのか
プロジェクトでどのメソッドを使用しても、より構造化された CSS と UI の利点が得られます。一部のメソッドはそれほど厳密ではなく柔軟性があり、他のスタイルも理解しやすく、チーム内で認識を合わせることも難しくありません。
私が他のメソッドよりもBEMを選ぶ理由、それは他の方法（すなわちSMACSS）より混乱しづらく、良いアーキテクチャー（すなわちOOCSS）とわかりやすい用語を提供してくれるためです。
Mark McDonnell著「BEMによる保守可能なCSS」(リンク先はすでに削除済み)
Blocks, Elements, Modifiers
BEMがこの手法の重要な要素であるブロック、要素、および修飾子の略語であることを聞いても驚かないでしょう。 BEMの厳密な命名規則はここにあります。
Block
単独で意味のある独立したエンティティ。
例：header, container, menu, checkbox, input
Element
独立した意味を持たず、意味的にその Block に結び付けられている Block の一部。
例：menu item, list item, checkbox caption, header title
Modifier
ブロックまたは要素上のフラグ。 外観や動作を変更するために使用する。
例：disabled, highlighted, checked, fixed, size big, color yellow
3つの分類についてより詳しく
ページ上の特定の要素をBEMに実装する方法を見てみましょう。GitHubからボタンを取ります。
通常の場合には通常のボタンを、別の場合にはさらに2つの状態を設定できます。 BEMを使用してクラスセレクターでブロックをスタイル設定するので、必要な任意のタグ（button, aまたはdiv）を使用してそれらを実装できます。 命名規則は、block-modifier-value構文を使用するように指示しています。
<button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</button>
.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button--state-danger {
color: #900;
}
利点
-
モジュール性
ブロックスタイルはページ上の他の要素に依存しないため、カスケードによる問題は発生しません。
また、完成したプロジェクトから新規プロジェクトへの流用も可能です。 -
再利用性
独立したブロックをさまざまな方法で構成し、それらを賢く再利用することで、管理しなければならないCSSコードの量が減ります。一連のスタイルガイドラインが整っていれば、ブロックのライブラリを構築してCSSを非常に効果的に管理できるようになります。 -
構造
BEMのメソッドはCSSコードに単純で理解しやすいまま強固な構造を与えます。
参考文献
- 「なぜBEMか」を簡潔に
- MindBEMding - BEMの構文を理解する
- CSSのガイドライン
- 小規模プロジェクトのためのBEMメソッド
- BrandwatchでのBEM使用例
- Used and Abused - CSSの継承とカスケードの誤使用
- Objects in Space - SMACSSとBEMを使ったモジュラーSASS開発のためのスタイルガイド
- SassとSMACSSを使用してレガシーCSSを拡張および維持する方法
- BEMとSassを使ってモジュラー「My Health Skills」を構築する
- 「My Health Skills」の構築 Part3
ケーススタディ
近いうちに「既存のプロジェクトをBEMに移行する方法」を書きたいと思っています。それまでは Nicole Sullivan による素晴らしいプレゼンテーション「CSSプリプロセッサパフォーマンス」を読んでみてください。 大部分のWebサイトで遭遇する問題について非常に優れた説明がなされ、それらを突き止めて処理する方法を提示しています。
Namingページ
コンピュータサイエンスには、キャッシュの無効化と名前の付け方の2つの難しい問題しかありません - Phil Karlton
正しいスタイルガイドが開発速度、デバッグ、およびレガシーコードでの新機能の実装を大幅に向上させることは周知の事実です。残念ながら、ほとんどのCSSは構造や命名規則なしで開発されていることがあります。これだと長期的保守に適したCSSにはなりません。
BEMアプローチは、Webサイトの開発に参加するすべての人が単一のコードベースで機能し、同じ言語を話すことを保証します。 適切な名前を使用すると、Webサイトのデザインの変更に備えることができます。
Block
単独で意味のある独立したエンティティをカプセル化します。ブロックはネストして相互に作用しますが、意味的には同じです。優先順位や階層はありません。DOM表現のない全体的な実体（コントローラーやモデルなど）もブロックになることができます。
Block_命名規則
Blockの名称にはラテン文字、数字、およびダッシュが使えます。 CSSクラスを形成するには、名前空間の短いプレフィックスを追加します。
例：.block
Block_HTML
クラス名を付けた場合、どのDOMノードもブロックとして扱えるようになります。
例：<div class="block">...</div>
Block_CSS
- クラス名セレクタのみを使う
- タグ名やIDセレクタは使わない
- ページ上の他のブロックや要素に依存しない
例：.block { color: #042; }
Element
ブロックの一部であり、独立した意味はありません。どの要素も意味的にそのブロックに結び付けられています。
Element_命名規則
Element の名称にはラテン文字、数字、ダッシュ、およびアンダースコアが使えます。Classはブロック名と2つのアンダースコア、そして要素名で構成されています。
例：.block__elem
Element_HTML
ブロック内の任意のDOMノードを要素にできます。与えられたブロック内では、すべての要素は意味的に同じです。
<div class="block">
...
<span class="block__elem"></span>
</div>
Element_CSS
- クラス名セレクタのみを使う
- タグ名やIDセレクタは使わない
- ページ上の他のブロックや要素に依存しない
.block__elem { color: #042; }
div.block__elem { color: #042; }
.block .block__elem { color: #042; }
Modifier
ブロックまたは要素上のフラグ。外観、動作、または状態を変更するために使用します。
Modifier_命名規則
Modifierは、ラテン文字、数字、ダッシュ、およびアンダースコアで構成されます。クラスはブロック、または要素の名前に「ダッシュ2つ(--)」を加えた形式で構成されます。
.block--mod
.block__elem--mod
.block--color-black
.block--color-red
複雑な修飾子の中のスペースはダッシュに置き換えられます。
Modifier_HTML
Modifier はブロックや要素のDOMノードに追加されるクラス名です。変更するブロックや要素にのみ modifier クラスを追加し、元のクラス(block)をそのまま使用します。
<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>
<div class="block--mod">...</div>
Modifier_CSS
セレクタとして修飾子クラス名を使う場合。
例：.block--hidden { }
ブロックレベルの修飾子に基づいて要素を変更する場合。
例：.block--mod .block__elem { }
要素を修正する場合。
例：.block__elem--mod { }
例
修飾子の付いたブロック「form」に以下の条件を付したパターン例を示します。
- "xmas"というテーマ(--theme-xmas)の付与
- "simple"という修正(--simple)の付与
- 要素の 入力(__input) と 送信(__submit)
- 独自の修飾子を 無効(--disabled) にした要素の送信
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input
class="form__submit form__submit--disabled"
type="submit" />
</form>
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }