```
#### Blockを親セレクタにしない
詳細度を強くしたり、スコープを作るためにBlockを親セレクタにしてElementとModifierを指定しないようにしましょう。Blockの名前を継承することで擬似的にスコープを作るようにしましょう。詳細度はなるべくフラットに保ってカスケーディングのコントロールをしやすいようにします。
```css
/* Good */
.block {}
.block__element {}
.block--modifier {}
/* Bad */
.block {}
.block .block__element {}
.block .block--modifier {}
```
#### 他のBlockに依存させない
Blockは他のBlockに依存せず、単独で機能するようにしましょう。例えば、`Block1`のスタイルを変更するために`Block2`を親セレクタにして`Block1`を上書きするようなことはできるだけ避けましょう。同じ詳細度であれば、セレクタを加えなくても後から記述するだけで適応されます。
```css
/* Good */
.block1 {}
.block__element {}
.block2 {}
/* Bad */
.block1 {}
.block__element {}
.block2 .block1 {}
```
また、例えば`Block1`と`Block2`を左右に配置したい場合は、グリッドのようにレイアウトをするための`Block3`を定義するようにしましょう。Blockの機能を拡張しすぎたり、依存関係を作ってしまうよりも、Blockを組み合わせることでページを構築するようにします。
#### Sassのネストを制限する
Sassを使用している場合、ネストによってBEMの記述が楽になりますが、なるべく使用しないようにしましょう。理由はBlockに関連するルールセットが際限なくつながり、長くなることで可読性やメンテナンス性を損なう可能性が高いからです。
```scss
// Bad
.block {
&__element {
...
}
&__element {
...
}
&__element {
...
}
&--modifier {
...
}
&__element {
...
}
&__element {
&--modifier {
...
}
}
}
```
また、ネストを深くしすぎると、HTMLのclass属性から該当するスタイルを検索するときに支障をきたす可能性が増します。速く書くよりも、読みやすくメンテナンスしやすくなるようにしましょう。
### 接頭辞（Prefix）
接頭辞（Prefix）をclassセレクタとIDセレクタに使用することで、名前が重複する可能性を下げたり、その役割を簡潔に示すことができます。FLOCSSで定義されている接頭辞に以下のような接頭辞を加えて使用するのを推奨します。
* `c-` Componentレイヤーのコンポーネントあることを示します
* `p-` Projectレイヤーのコンポーネントであることを示します
* `u-` Utilityレイヤーのコンポーネントであることを示します
* `js-` JavaScriptのフックとして使用されるclassやIDであることを示します（CSSでスタイルは指定しない）
* `is-`, `has-` 要素の表示の切り替えなどの状態の変化があることを示します
* `t-` Themeレイヤーのコンポーネントであることを示します。
* `s-` Scopeレイヤーのコンポーネントであることを示します。
* `qa-`, `t-` QA/Testレイヤーのコンポーネントであることを示します。
役割ではなく、プロジェクトの名前やバージョンを示すために接頭辞をつけるのも有効です。例えば`.pj-`（project）のようにプロジェクト名を短縮させたり、`.pj02-`のようなバージョンをつけると重複を避けることができます。
接頭辞をつけることはスタイルの追加をより安全にしたり、他のCSSフレームワークやライブラリと共存するベターな方法です。
### 接尾辞（Suffix）
classに`-sm`や`-md`などを付与してブレイクポイントを指定していることを示すことがあります。規則性をもたせるためにクラス名の最後に接尾辞を付けることを推奨します。より明示的に名前をつけるために`@`を接尾辞として使用してもいいでしょう。
```css
/* Good */
@media (min-width: 768px) {
.u-col1of3\@md { width: width: 33.33333% !important; }
.u-col2of3\@md { width: width: 66.66667% !important; }
.u-col3of3\@md { width: width: 100% !important; }
}
```
`@`をスタイルシートで指定する際にはバックスラッシュ（`\`）でのエスケープが必要ですが、HTMLで指定する際にはエスケープは必要ありません。詳しくは以下の記事を参照してください。
[BEMIT: Taking the BEM Naming Convention a Step Further | CSS Wizardry](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/)
### 単語の省略を制限する
意味が汲み取れない単語の省略は禁止します。例えば`navigation`を`nav`と省略することは許容しますが、`title`を`ttl`と省略するのは意味が読み取れませんし、ほとんど短くなってもいません。基本的には省略をせずに名前をつけましょう。
```css
/* Good */
.navigation {}
.title {}
.text {}
.icon {}
/* allow */
.nav {}
/* Bad */
.ttl {}
.txt {}
.ico {}
```
省略する場合にはドキュメントに残すことを推奨します。認識を共有することもできますし、`nav`と`navi`が混在してしまうようなことを防ぐこともできます。
### 絶対値を表すクラス名を避ける
`.mb10`のような値を固定した名前をつけることを禁止します。理解はしやすい名前ですが、値を変更したい場合にHTMLに記述したclass属性も変更する必要が出てきます。こうした変更に柔軟に対応するために`.mbs`（margin-bottom smallの意味）のような相対的な名前をつけましょう。
```css
/* Good */
.mbs { margin-bottom: 10px; }
/* Bad */
.mb10 { margin-bottom: 10px; }
```
また、`small`, `medium`, `large`のようなパターンに制限するルールを設けることで、際限なくサイズ違いが増えてしまうことを防ぐこともできます。
カラーネーム（`.red`や`.blue`）のようなクラス名も禁止します。ある要素の色を変更したい場合にクラス名と値の意味が合わなくなってしまい、class属性を変更しなくてはいけなくなることが考えられるからです。`.success`や`.brand`のような値を変更しても意図が変わらない名前にしましょう。
```css
/* Good */
.brand {}
.success {}
/* Bad */
.red {}
.blue {}
```
## セレクタ
### インライン記述を使用しない
HTMLの`style`属性に直接スタイルを記述するインライン記述は使用を禁止します。理由はスタイルシートで一括管理できないこと、詳細度が高いこと、HTMLのファイルサイズを無闇に増やしてしまうこと、単一のスタイルごとしか指定できない（レスポンシブに対応できない）からです。
```html
```
JavaScriptによるインラインでのスタイル追加もできるだけ避けて、classを追加するようにします。
### HTML（DOM）構造に依存させない
マークアップは変更される可能性があります。例えば`article`を`section`にしたり`h2`を`h3`に変更するかもしれません。特定のHTML要素に依存したセレクタを指定している場合はその都度変更しなくてはいけません。
```css
/* Bad */
article h2 {}
```
classを使ったセレクタを定義していればHTML構造が変更されたとしても、CSSを変更する必要がなくなり、可搬性が高まります。
```css
/* `article`要素の見出しに指定するクラス */
.article__title {}
/* 汎用的な見出しのクラスを用意 */
.u-h2 {}
```
### 不要な要素セレクタを連結させない
classやIDセレクタで指定する時に要素セレクタを連結させるのは詳細度を高めるだけで意味がありません。
```css
/* Good */
.foo {}
/* Bad */
h2.foo {}
```
もし、特定の要素に指定してほしいのであれば、コメントによってそれを示しましょう。
```css
/* Good */
/* h2要素に指定してください。 */
.foo {}
/* h2 */.foo {}
```
### セレクタを短くする
セレクタは必ずしもHTML構造に沿う必要はありません。場合によってはセレクタを短くすることで詳細度を低く抑えることができます。
```css
/* Good */
ul a {}
th {}
/* Bad */
ul li a {}
table th {}
```
### セマンティックでないセレクタの指定を制限する
特定の意味を持たないセレクタ（`div`, `span`）は使用される範囲も広いため、セレクタに対する影響範囲も広くなります。使用する場合はできるだけ範囲を狭くして指定してください（classセレクタで指定するのが望ましいです）。また、単体でのセレクタは禁止とします。
```css
/* Good */
.foo > div {}
.foo > span {}
/* Bad */
div {}
span {}
.foo div {}
.foo span {}
```
### 拡張できるようにオブジェクトを定義する
保守性や拡張性を高めるために構造を含んだベースになるclassを定義し、装飾的なclassで拡張するようにしましょう。ベースになるスタイルを変更したい場合でも1箇所変更するだけでよくなりますし、拡張するclassにも最低限のスタイルを追加するだけになります。
1つのclassでまとめて指定してしまうと、バリエーションが増えるごとに同じスタイルを何回も指定することになってしまいます。ベースになるスタイルを変更したい場合に何箇所も変更する必要も出てきます。
下記の例ではベースになるclassの`.p-alert`に装飾的なスタイルが指定されていますが、オブジェクトの特性上、問題はごくわずかだと判断しています。
```html
```
```css
/* Good */
.p-alert {
padding: 1em;
border: 1px solid #e7edf0;
border-radius: 3px;
color: #47525d;
background-color: #f7f9fa;
}
.p-alert--success {
border-color: #d9f4e1;
color: #2c683f;
background-color: #edfaf1;
}
.p-alert--error {
border-color: #ffcaca;
color: #921515;
background-color: #ffe3e3;
}
/* Bad */
.p-alert-default {
padding: 1em;
border: 1px solid #e7edf0;
border-radius: 3px;
color: #47525d;
background-color: #f7f9fa;
}
.p-alert-success {
padding: 1em;
border: 1px solid #d9f4e1;
border-radius: 3px;
color: #2c683f;
background-color: #edfaf1;
}
.p-alert-error {
padding: 1em;
border: 1px solid #ffcaca;
border-radius: 3px;
color: #921515;
background-color: #ffe3e3;
}
```
### State単体にスタイルを指定しない
[SMACSS](http://shop.smacss.com/)というCSSの設計手法にState（ステート）という状態をあらわすルールがあります。例えば`.is-open`というclassはある要素を開いた状態にするために使用されます。
このStateに単体でスタイルをもたせないようにしましょう。Stateはコンポーネントに対して指定するようにして、影響範囲を制限しましょう。
```css
/* Good */
.foo.is-open {}
/* Bad */
.is-open {}
```
### IDセレクタを多用しない
CSSはカスケーディングをコントロールしなければ、すぐに破綻してしまいます。IDセレクタは詳細度が圧倒的に高いことや、ページ内に1度しか使用できないため再利用性にも欠けます。classではなくIDで指定する理由が明確に説明できる場合にのみ使用しましょう。
CSSのIDセレクタとHTMLのid属性とは区別して考えます。id属性はページ内リンクやJavaScriptでのフックとして利用される場合があるためです。
### メディアクエリをまとめて管理しない
ファイル容量の削減のためにメディアクエリをブレイクポイントごとにまとめて記述することを禁止します。
```css
/* Good */
.foo {}
@media screen and (min-width: 768px) {
.foo {}
}
/* Bad */
@media screen and (min-width: 768px) {
.foo {}
.bar {}
.baz {}
}
```
同じ目的のオブジェクトは同じ場所（Sassの場合は同じファイル）に記述するようにしましょう。全体像の把握を難しくさせたり、モジュール（ある機能のひとまとまり）として管理するのを難しくさせます。短期的なパフォーマンスよりも見通しの良さやメンテナンス性を重視しましょう。
## プロパティ
### !importantを多用している
`!important`は基本的に使用を禁止しますが、意図的に使用する場合は許容されます。例えばヘルパークラスは確実に適応させるために使用することがあります。
```css
/* Good */
.u-col1of12 { width: 8.33333% !important; }
.u-col2of12 { width: 16.66667% !important; }
.u-col3of12 { width: 25% !important; }
```
その場合もスタイルシートの終盤に記述をして、影響範囲を抑えましょう。
### スタイルを取り消している
スタイルの取り消しとは、あるスタイルを`0`や`none`などで値をリセットすることです。スタイルの取り消しがあった場合は多くのスタイルを持ちすぎている、スタイルを早く指定してしまっていることが考えられます（リセットCSSは除く）。
```css
/* Bad */
.foo {
border: 1px solid #ddd;
}
/* ある要素内ではボーダーが邪魔になるためリセット */
.bar .foo {
border: none;
}
```
Modifierで定義しておくと必要な時にだけ指定することができます。
```css
/* Good */
.foo {}
.foo--bordered {
border: 1px solid #ddd;
}
```
### 要素セレクタに装飾的なスタイルを指定しない
`h1`や`p`といったセマンティックな要素セレクタには装飾的なスタイルを指定してはいけません。必ずあとでスタイルを取り消すことになります。
```css
/* Bad */
h2 {
padding-bottom: 0.5em;
border-bottom: 1px solid #888;
}
```
要素セレクタにはブラウザのデフォルトスタイルシートやリセットCSSで指定されるような最低限のスタイルにとどめておきましょう。
```css
/* Good */
h2 {
font-size: 2rem;
line-height: 1.2;
margin-top: 0;
margin-bottom: 24px;
}
```
### 高さを指定しない
閲覧されるデバイスによって同じコンテンツであっても横幅が変わるため高さも可変します。高さを指定しているとコンテンツが隠れてしまったり、余分な余白ができてしまいます。
```css
/* Bad */
.foo {
height: 1000px;
}
```
高さは指定せず、コンテンツによって決まるものと考えましょう。ロゴなどの特定のサイズを持ったものはこれに当たりません。
### 固定の幅を持たせない
コンテンツブロックは基本的に固有の幅を持つことを禁止します。`width`を固定していると、ある場所では幅が足りず、ある場所でははみ出てしまうなどの弊害が出ます。横幅は可変するようにしておいて、コンテナブロックによってサイズが決まるようにしておきます。
幅を指定したい時は、コンテナブロックに`max-width`を指定する、`width`のヘルパークラスを使用する、Modifierでサイズを指定するなどの方法があります。
```css
/* Good */
.c-button {}
.c-wrapper {
max-width: 1200px;
}
.c-button--size-full {
width: 100%;
}
/* Bad */
.c-button {
width: 300px;
}
```
### カラーコードは短縮させる
`color`プロパティなどで色を指定する時は可読性をあげるために、可能な場合は短縮しましょう。
```css
/* Good */
.foo { color: #ddd; }
/* Bad */
.foo { color: #dddddd; }
```
### 文字列には引用符（ダブルクォート）をつける
`content`プロパティやURLの指定、属性セレクタの指定をする時にはダブルクウォートを使用しましょう。
```css
/* Good */
.foo {
content: "this is content";
background: url("logo.png");
}
input[type="submit"] {}
/* Bad */
.foo {
content: 'this is content';
background: url(logo.png);
}
input[type=submit] {}
input[type='submit'] {}
```
### 0に単位をつけない
値が0の場合はpxや%といった単位は必要がないため使用しません。
```css
/* Good */
.foo { margin: 0; }
/* Bad */
.foo { margin: 0px; }
```
### 小数点のあたまの0を省略しない
`0.5em`などの小数点の前の0は省略しません。ファイルサイズの削減は考えずに、明示的に指定しましょう。
```css
/* Good */
.foo { font-size: 0.5em; }
/* Bad */
.foo { font-size: .5em; }
```
### すべて小文字で記述する
プロパティとプロパティ値は大文字でも小文字でも同様に扱われますが、小文字に統一しましょう。
```css
/* Good */
.foo { color: #fff; }
/* Bad */
.foo { COLOR: #FFF; }
```
### ショートハンドはなるべく避ける
`font-size`や`margin`などショートハンドが用意されているプロパティがありますが、ショートハンドに指定しなかったプロパティに初期値が渡されてしまうことから意図せずプロパティがリセットされてしまったり、指定する必要がないところにまで指定する必要が出てきます。明示的に何が目的なのかを示すという意味でも使用をなるべく避けましょう。
```css
/* Good */
.foo {
/* 中央配置にする。 */
margin-right: auto;
margin-left: auto;
}
/* Bad */
/* 上下を0に指定する必要がない。 */
.foo { margin: 0 auto; }
```
### ベンダープレフィックスは手動で書かない
`-webkit-`や`-moz-`などのベンダープレフィックスは手動で書かず、[Autoprefixer](https://github.com/postcss/autoprefixer)を使用しましょう。Sassの@mixinを使用する方法もありますが、@mixinを管理する手間が発生します。Gulpなどの環境が使えない場合は[Prepros](https://prepros.io/)を推奨します。
## Sass
BootstrapやFoundaitonなどのCSSフレームワークでも使われているようにSassを利用してCSSを書くことがデファクトスタンダードになっています。Sass特有の機能にいくつかのルールを設けます。
### SCSS記法を使う
Sassには拡張子が.sassのSASS記法と拡張子が.scssのSCSS記法があります。どちらも一長一短がありますが、SCSS記法を使うことを推奨します。SCSS記法であればCSSの構文とほとんど変わらないので、誰にとっても読みやすいからです。また、SCSS記法の方がよく使われている（CSSフレームワークはほとんどがSCSS記法で書かれている）ので、ソースコードの流用がしやすいこともメリットです。
また、jQueryプラグインなどを使う時もデフォルトのCSSファイルの拡張子を.scssに変更するだけでインポートできるようになります。
### 機能ごとにコードを分割する
SassにはCSSとしてアウトプットさせないファイルを定義するパーシャルという機能があります。コードをファイルごとに分割してモジュール化して管理しましょう。scssファイルをアンダースコア(`_`)から始めることでパーシャルファイルとして認識されます。
```scss
// パーシャルファイルをインポートする
@import "_grid";
// インポートしない場合
// @import "_grid";
```
スタイルシートのアウトプットする場所を指定することでカスケーディングを管理しやすくなったり、使うファイルだけインポートすることができます。
### 変数は繰り返しや演算する場合にだけ使用する
Sassの変数は特定の値を一括で管理できる便利な機能ですが、使いすぎると可読性を損なったり変数名がバッティングする危険性が増します。同じ値を繰り返し指定する場合や四則演算などで値を変更・再計算する場合にだけ定義しましょう。
```scss
// Good
$unit-base: 1em !dafault;
.foo {
margin-left: (-$unit-base);
}
.foo__bar {
padding-left: $unit-base;
}
// Bad
$foo-unit: 1em !dafault;;
.foo {
padding: $foo-unit;
}
```
CSSフレームワークでは大量の変数が定義されています。これは、コードを変更・追加せずに変数でスタイルを変更するためです。通常のスタイルシートではこういった機能はいらない場合がほとんどでしょう。
### モジュール内でだけ使用する変数は個別に定義する
モジュール内で、ある変数や値が繰り返し使用されている場合はモジュール専用の変数を定義しましょう。プロジェクト全体で使用される変数に変更があった場合でも各モジュールで対応できるようにしておきます。
```scss
// Good
$unit-base: 1em !default;
/**
* #Media
*/
$media-gutter: $unit-base !default;
```
### 変数だけでなくキーワードや相対値を利用する
数値やカラーは必ずしも変数で固定値を指定する必要はありません。例えば親要素の計算値を継承する[inherit](https://developer.mozilla.org/ja/docs/Web/CSS/inherit)キーワードやプロパティの初期値を指定する[initial](https://developer.mozilla.org/ja/docs/Web/CSS/initial)キーワード、同じ要素の`color`プロパティを取り込む[currentColor](http://www.hcn.zaq.ne.jp/___/WEB/css-color-ja.html#currentcolor-color)キーワードなどがあります。
数値（[length](https://developer.mozilla.org/ja/docs/Web/CSS/Length)）を指定するときも`px`のような絶対値で指定するよりも、当該要素のフォントサイズを基準にする`em`やルート要素（通常は`html`要素）のフォントサイズを基準にする`rem`のような相対値で指定したほうが柔軟に対応することができます。
### 変数には!defaultフラグを必ず指定する
変数を定義する際には`!default`フラグを必ず指定するようにしましょう。その変数が定義されているファイルより先に同じ変数を定義し直すことで変数の値を確実に上書きすることができます。これによって変数をまとめて管理することが可能になります（必ずしもまとめて変更する必要はなく、あくまでオプションです）。
```scss
// Good
$unit-base: 1em !default;
// Bad
$unit-base: 1em;
```
### 直接的な変数名は用途をあらわす変数名に格納する
カラーパレットとして`$color-red`のような変数名をつける場合は（例えば`$color-error`のような）用途をあらわす変数名にいったん格納してから指定するようにしましょう。値を変更したい場合にも一箇所を書き換えるだけで済むようになりますし、変数名と値が矛盾することを避けることができます。ハードコード（特定の状況に固定してしまうこと）は避けて、常に変更がしやすいようにしておきましょう。
```scss
// Good
$color-red: red;
$color-error: $color-red;
.foo { color: $color-error; }
// Bad
$color-red: red;
.foo { color: $color-red; }
```
### 変数や関数に名前空間をつける
BootstrapやBourbonといったフレームワークやライブラリを併用した時に変数や関数の名前の衝突が起きないように、名前空間（namespace）をつけましょう。冗長にはなってしまいますが、確実に指定することができるようになります。
```scss
// Good
$my-variable: "variable";
@funciton my-function() {}
@mixin my-mixin() {}
// Bad
$variable: "variable";
@funciton function() {}
@mixin mixin() {}
```
### ネストは擬似要素やメディアクエリだけに制限する
兄弟セレクタやBEMのElementやModifierを指定するためにSassのネストは便利です。ですが、ネストを制限なく使用すると際限なく縦に長くなってしまい、可読性を損ないます。ネストは擬似要素、擬似クラス、メディアクエリの使用にとどめます。
```scss
// Good
.foo {
&:hover,
&:focus {
...
}
@media (min-width: 768px) {
...
}
}
// Bad
.foo {
&__bar {
...
...
...
}
&__baz {
...
...
...
}
}
```
ネストするセレクタが明確に関係している場合はネストの使用を許容します。別々のルールセットにして記述するよりも理解しやすいと考えられるためです。
```scss
// Good
.foo--gutter-medium {
margin-left: - $foo-gutter;
> .foo__item {
padding-left: $foo-gutter;
}
}
```
### 数値の計算には括弧（）を常に使う
Sassでは四則演算を使うことができます。複数の数値を計算させるときに想定外の計算結果になってしまうことを防ぐために括弧`（）`で囲いましょう。
```scss
// Good
.foo {
width: (100% / 3);
}
// Bad
.foo {
width: 100% / 3;
}
```
### extendはできるだけ使用しない
extendは継承を可能にするため、Sassファイル内を簡潔にできます。しかし、継承元のセレクタを記述した場所にまとめて出力されるため、カスケーディングを複雑にしてしまう可能性があります。また、CSSにコンパイルした時に膨大なセレクタのついたルールセットができてしまうことで可読性を失う可能性があります。
もし使用するのであれば、同じモジュール内で完結させるか、継承元のセレクタを1つのモジュールにまとめてカスケーディングを管理しやすいようにしましょう。
### 更新用のCSSファイルを作成する
Sassを使えないクライアントがCSSファイルを変更する可能性がある場合は、クライアントがスタイルを追加するためのCSSファイルを作成しておくと管理がしやすくなります。
また、そのような場合にはextendは極力使用しないようにして、読みやすいCSSファイルになるようにしましょう。
================================================
FILE: how-to-bem.md
================================================
# BEM(MindBEMding)によるCSS設計
## BEMとは？
[BEM](https://github.com/juno/bem-methodology-ja/blob/master/definitions.md)は[Yandex](https://www.yandex.com/)という主にロシア人で構成される、検索エンジンなどを作っている企業が使っているCSSの設計方法です。[BEM Tools](https://github.com/bem/bem-tools)という、jsonでデータを管理してBEMの規則に則ったHTMLを生成する仕組みによってサイトが管理されているようです。
BEMツールに触れてみる - < /gecko >
命名規則はBEMから派生した[MindBEMding](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)の方が広く使われているので、MindBEMdingをベースに考えていきます。
MindBEMdingは[csswizardryことHarry Roberts](https://github.com/csswizardry)が提唱したCSSの命名規則のことです。Harry RobertsはCSS界では世界的に有名で、コンサルタントやスピーカーとして世界中で活躍されています。
* [CSS-Guidelines](http://cssguidelin.es/)
* [csswizardry-grids](https://github.com/csswizardry/csswizardry-grids)
* [inuitcss](https://github.com/inuitcss/inuitcss)
---
これ以降の内容は忠実なBEMの方法論ではなく、BEMの考え方にいくつかのアイデアを加えたものになります。
公式ドキュメントは日本語に翻訳された[bem-methodology-ja](https://github.com/juno/bem-methodology-ja/blob/master/definitions.md)が公開されています。
## BEMの概念
BEMはブロック（Block）、エレメント（Element）、モディファイア（Modifier）の頭文字をとったものです。
Blockはあるパーツ（コンポーネント）の親要素です。BlockはElementと呼ばれる子孫要素を持つことができます。Modifierはバリエーションや状態を変化させるときに指定するもので、BlockかElementと同階層に指定します。
命名規則はハイフン2つやアンダースコア2つでつなげます。
* `.Block`
* `.Block__Element`
* `.Block--Modifier`
* `.Block__Element--Modifier`
詳しい説明は後述します。
### Block（親要素）
Blockはサイトを構成するパーツのことです。例えばボタン、グリッド、タブ、見出し、画像などで、簡単に言ってしまえばパーツの親要素です。BEMではBlockを起点として考え、サイトはBlockを組み合わせることで構成していきます。
例えばブロック要素で余白を持ったシンプルなBlockの`.box`を作りました。
```scss
.box {
display: block;
padding: 1em;
}
```
ボタンもBlockとして考えることができます。ここではボタンのベースになるスタイルだけを持っています。
```scss
.button {
display: inline-block;
margin: 0;
padding: 0.75em;
border: none;
border-radius: 3px;
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: 1;
text-align: center;
text-decoration: none;
background: transparent;
cursor: pointer;
appearance: none;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
&:disabled,
&.is-disabled {
opacity: 0.5;
pointer-events: none;
}
}
```
2つのBlock（`.box`と`.button`）を組み合わせて1つのパーツを作ることもできます。
```html
```
### Element（子孫要素）
ElementはBlockを構成するパーツの1つ1つのことです。例えばグリッドを構成するカラム、タブのボタンやコンテンツ部分、見出しや画像などです。
BEMではBlock（親要素）から見て下の階層にいる要素はすべてElement（子孫要素）として扱います。なので、Blockは1つしかありませんし、Elementは0個以上から構成されます。
クラス名は`.block__element`のようにBlockの名前を引き継いでアンダースコア2つでつなぎます。
例えばグリッドレイアウトであれば、`.grid`がBlockになり、`.grid__item`がElementになります。
```scss
.grid {
display: block;
margin: 0;
padding: 0;
font-size: 0;
list-style-type: none;
}
.grid__item {
display: inline-block;
width: 100%;
font-size: medium;
font-size: 1rem;
vertical-align: top;
}
```
先ほどの`.box`というBlockのElementとしてボタンを定義しました。Block特有のスタイルがある場合は`Block__Element`として定義します。
```html
```
ボタンのベーススタイルを持っている`.button`というBlockをマルチクラスで指定しました。`.box__button-item`は色やサイズなどの装飾的な指定をするだけでよくなりました。
```html
```
### Modifier（バリエーション）
ModifierはBlockとElementのバリエーションや状態の変化をつくるときに指定します。
クラス名は`.block__element--modifier`か`.block--modifier`のようにBlockとElementの名前を引き継ぎ、ハイフン2つでつなぎます。Modifier名は以下のようにつけるといいでしょう。
* `Block--small` - あるBlockの余白やサイズなどが小さいバージョン
* `Block--pad-small` - あるBlockの`padding`が小さいバージョン
* `Block--item-small` - Block内の`item`というElementが小さいバージョン
例えば`.box`というBlockに背景色をつけたパターンが出てきたとします。
```scss
.box {
display: block;
padding: 1em;
}
```
Block自体ではなく、Blockに背景色を持たせるためのModifierを作ります。
```scss
.box--highlight {
background-color: gray;
}
```
これで、元のBlockのスタイルを変更することなく、背景色をつけたパターンを作ることができました。HTMLはこのようにマルチクラスで指定することになります。
```html
```
基本的にリセットしていくよりも、足していくようにすると管理しやすくなります。
```scss
/* NG */
.box {
display: block;
padding: 1em;
background-color: gray;
}
.box--no-highlight {
background-color: transparent;
}
```
このパターンはOOCSSの原則のひとつである「構造と見た目の分離」と同じことをしています。つまり、BEMとOOCSSは組み合わせることもできます。
## BEMのメリット
### 採用するメリットと導入コスト
BEMの概念や命名規則の方法など、導入するためのコストは必要です。ですが、BEMのルールは基本的に案件ごとに変わることはないので、導入コストは最初の案件だけに限られると思います。
また、逆にルールがあるということは、自分で考える必要がないということです。自分で考えるはずだった時間を、他の重要なことに使えます。後述する命名規則の明確さもメリットのひとつです。
基本的なルールが決まっていること、ルールを共通言語にすることでコミュニケーションを円滑にできること。BEMを採用するメリットはこのあたりにあるのかなと思います。
### 命名規則の明確さ
BEMを使うメリットのひとつにクラス名からクラスが持っている役割が伝わりやすいことがあります。
クラス名の単語をハイフンやアンダースコアで区切ると、
```scss
.widget-list {}
.widget_list {}
```
のようになり、ウィジェットリストなのか、ウィジェットの中にあるリストなのか、人によって解釈が変わってしまう恐れがあります。
BEMであれば、ウィジェットリストなら
```scss
.widget-list {}
```
になりますし、ウィジェットの中にあるリストなら、
```scss
.widget__list {}
```
のようにクラス名だけで判断することができます。
---
BootstrapやFoundationがハイフン区切りでも問題がないのは、
* フレームワークとして完成した状態で使うことを前提としているのでブレない
* ドキュメントが充実している
ことがあげられます。実際の案件ではじめからこの条件を満たすことはまずできません。いちから組んでいってもブレにくいルールが必要になります。
#### 命名規則のアレンジ
BEMのクラス名はBlockの名前を引き継いだりハイフン2つやアンダースコア2つで区切ること、マルチクラス（複数のクラスを指定すること）を前提していることから、class属性の指定が長くなりがちです。
クラス名をなるべく短くするために、命名規則を案件ごとに微調整することがよくあります。命名規則には3つのパターンがあります。
1つ目、通常は`block-name`のように単語をハイフンで区切ります。
```scss
.block-name {}
.block-name__element {}
.block-name--modifier {}
```
2つ目、単語をローワーキャメルケースにした場合。
```scss
.blockName {}
.blockName__element {}
.blockName--modifier {}
```
3つ目、単語をローワーキャメルケースにして、区切り文字を1つにした場合。
```scss
.blockName {}
.blockName_element {}
.blockName-modifier {}
```
Elementが複数の単語からなっている場合はより短くできます。
```scss
.block-name__element-name {}
.blockName__elementName {} // 2文字少ない
.blockName_elementName {} // 3文字少ない
```
## BEMの基本ルール
### クラスセレクタ単体に指定する
BEMではIDセレクタや要素セレクタは使用せず、クラスセレクタで指定します。
```scss
/* Good */
.block-name {}
.block-name__element {}
.block-name--modifier {}
```
クラスセレクタ単体にスタイルを指定していくので、詳細度は0,0,1,0のままになります。`!important`を使うこともほとんどありません。
IDセレクタを使わないのはページ内で使い回せるようにするためです。
```scss
/* NG */
#block {} // ページ内で1つしか使えない
#block__element {} // Elementが2つ以上ある場合に使えない
#block--modifier {}
```
要素を使わないのは影響範囲を限定させるためです。HTMLタグを限定させないことで使い回しをしやすくできるメリットもあります。
```scss
/* NG */
.block > p {} // Block直下の`
`すべてに適応されてしまう
```
案件によってルールを緩くした方が運用しやすいこともあります。どこまで厳密にするかは案件の規模、制作者の人数やレベル、運用をするひとのレベルなどから決めるといいでしょう。
### ElementとModiferを単体で使用しない
「ここは`.box__element`と同じデザインだから、`.box__element`だけ持ってこよう。」と考えてはいけません。ElementとModifierは親となるBlockの中でだけ指定することができます。
```html
```
`.box__element`が汎用的に使えるのであれば、`.box__element`ではなく、別のBlockとして定義しましょう。今は`.box__element`は汎用的に使えるかもしれませんが、スタイルが変更される可能性もあります。
## BEMのよくある問題
### Element__Element
BEMでは必然的にElementの数が多くなります。Blockから見て孫要素ができることもあります。このときに`.block__element__element`のようなクラス名にしているケースがあります。
```html
```
BEMはHTMLの構造をElementによって表す必要はありません。`child-element`のような名前にしても伝わりますし、より具体的です。
```html
```
例えば多階層のナビゲーションを`element__element`でマークアップした場合、極端な例かもしれませんがこのように階層が深くなるごとに名前が長くなってしまいます。
```html
```
僕なら以下のようにマークアップします。`.nav__items`の子要素は`.nav__child-items`のように`child`をつけています。`.nav__child-items`の子要素は`.nav__child-item`のように`s`を抜いて名前をつけています。
```html
```
階層が深くなっても2つの単語で収めるようにできればコードが読みやすくなると思います。Blockという名前のスコープがあるので、意味が理解しやすい範囲でBlock内で重複しなければ十分です。
なるべく階層が深くならないようにBlockを組み合わせて使うようにすると、名前の付け方はシンプルになると思います。
例えば、上記のナビゲーションをラップする`