2014年5月社内技術共有会で発表した内容です。

1. BEM記法
「HTMLコーディングする際のidやclassの命名規則」
 なぜBEMが必要か
 基本概念と命名規則
 BEMのメリット・デメリット
- 2014/05 Younju Park -

2. こんなコーディングに困ってませんか？
「タグ」、「id」、「class」が混在したスタイル指定や、深すぎる入れ子でコントロール不能。
場当たり的に「!important」を多用してリリース後の変更が困難になってませんか？
同じ見た目のまま見出しレベルを変えたいのに、「HTML」も「CSS」も両方修正し
更に見出しレベル毎に同じような記述をしてませんか？
パーツを場所の移動や複製したいだけで大掛かりな改修が必要になってませんか？
他の人の作ったサイトを改修しようとした時にどこを修正していいかわからない。
命名規則が独自すぎて意味が分からない。自分で書く時もどのように命名して
いいか迷って時間を浪費してませんか？
コピペで済むと思ったらHTML＋CSS＋JavaScript全部改修が必要になったという事はありませんか？
パーツの流用時、JavaScriptが動かない
制作者本人しかわからないclass名の命名規則
パーツを別の場所に流用すると表示が崩れる
汎用的に使えないスタイル
スタイルの優先順位のコントロール不能状態

3. BEMとは？
 「BEM」はBlock、Element、Modifierの略称
 HTMLコーディングの際のクラス名の命名規則（とっても特徴的）
 フロントエンド側(HTML/CSS/JavaScript)の総合設計に応用可能
 ファーストバージョン開発の高速化
 長期間メンテナンスでき、変更に強い設計
 チームのスケーラビリティ
 コードの再利用性向上
BEMはプロジェクトの成長とともに既存のページが変化していく事を前提とした設計です。
多くの人がかかわり、長く運用されるプロジェクト（コンパネ等）に向いています。
また、開発をすばやく行う事ができる為、キャンペーンなどの期間限定サイトでも有用です。

4. BEMの命名規則
block__element—modifier
 各要素をセパレーターで繋ぐ。
 全て小文字で記述。
 1つのタグに１つのclass（シングルクラス設計）。
elementsはアンダースコア２つ modifierはハイフン２つ

5. BEMを構成する３つの要素
Block（ブロック)
 Blockの構成要素。入力欄、ボタンなど。
 Elementが属するBlock内でのみ意味を持つ。
Element（エレメント）
 BlockやElementでスタイルが変わる時に使うもの。
 メニューの中で選択中のアイテムを違う色にする時など。
Modifier（モディファイア)
 Webページを要素ごとに区切ったもの。

6. BEM：Block（ブロック）
Tab 1 Tab 2 Tab 3 Tab 4 Tab 5
Search words
Search
================================
================================
================================
================================
================================
================================
Tab Menu Block
Search Block
Contents Block
Webページを要素ごとに区切ったもの。
Blockは完全に独立し、Blockを別の場所に移動しても、
単体で動作可能である必要がある。
左画面には大きく３つのBlock
が存在する
「Tab Menu Block」,
「Contents Block」,
「Search Block」。
また、「Contents Block」は
「Content Block」の繰り返し
でもある。

7. BEM：Elements（エレメント）
Tab 1 Tab 2 Tab 3 Tab 4 Tab 5 Search words
Search
================================
================================
Tab Menu Block Search Block
Content Block
Tab Elementsの繰り返し
imgとarticle Elements
inputとbutton Elements
Blockの下部要素であり、Blockを構成する要素。
Elementが属するBlock内でのみ意味を持つ。

8. BEM：Modifirer（モディファイア）
================================
================================
例）BlockのModifier
================================
================================
================================
================================
Tab 1 Tab 2 Tab 3 Tab 4
例）ElementsのModifier
「Tab 3」の画面
バリエーションの軸（例：行頭記号）や、状態（例：現在地）を表すプロパティの役割。
例えば、同じリストで、行頭記号が2種類以上存在する場合や、
同じメニュー内の「タブ」であっても、現在ユーザーがいるタブだけ、
見栄えを変える場合などに利用。
imgとarticle Elementsで構成されてい
るContent Blockについて、一部のみスタ
イルを変更して使用する場合
現在のTab Elementsの場合のみ、
スタイルを変更する場合

9. 命名規則：Block__Element--Modifierの区切り
block※1 ：ブロックのクラス名
block__element※2 ：ブロック配下のエレメントのクラス名
block__element __element ※3 ：エレメントが入れ子になる場合のクラス名
block__element—modifier ：ブロック配下のエレメントの別の状態のクラス名
block—modifier ：ブロックの別の状態のクラス名
block—modifier__element ：ブロックの別の状態のエレメントのクラス名
<div class=“body”>※1
<div class=“body__menu”></div>※2
<div class=“body__contents”>
<div class=“body__contents__search”>※3
<input type=" search " class=“search-keyword”>
<input type="submit" value=“Search“ class=“button-search”>
</div>
</div>
<div>
HTML
※DOMの構成を再現する必要はありません。

10. BEM命名規則：単語の区切り
BlockやElement名を２つ以上の単語で表す場合は
「単語-単語」のように区切り文字にハイフンを使用。
<div class=“service-body”>
<div class=“service-body__main-menu”></div>
<div class=“service-body__main-menu--current-active”></div>
<div>
HTML
service-body__main-menu--current-active

11. BEM命名規則：注意点
再定義の可能性がある文字列をclass名として宣言しないこと。
親子関係が分かるように、クラス名はなるべく具体的に命名する。
 ×：box ○：login-box
 ×：box-text ○：login-notice
CSSの制御はclassのみ使用しidは使わない。idはJavaScript
のイベント用にだけ使う。
 classは複数同時使用や再使用が容易である。
 idはclassより反映優先順位が高く、idで宣言されたスタイルをclassで
上書きするのは容易ではない。

12. BEMのメリット
 コードの可読性が上がり、意味付けが簡単に出来る。
 HTMLとCSSは、いつでもデザインの変化に対応出来る。
 プログラマとフロントエンドエンジニア間で、お互いのコードの理解
力が上がる。
 各要素の命名が具体的であるため、メンバー間のコミュニケーショ
ンが取りやすく、メンテナンスや共同開発の効率が上がる。
 パーツ単位のコードの再利用が容易に出来る。
 画像ファイル名の命名規則にも応用可能。

13. BEMのデメリット
 記法が独特で気持ちが悪い（慣れの問題？）
 ElementやModifierの名前が冗長になりがち。
 対処１：命名規則の亜種を利用
セパレーターをアンスコ、ハイフン１つにし、
単語の区切りはキャメルケースにする。
「header__global-menu__link-tab—hover 」
→「header_globalMenu_linkTab-hover」
 対処２：良く使う長い単語の略称をチームで予め統一しておく
 icon → ico
 heder → hd
 mouseover → hov
冗
長
化
対
策

14. ありがとうございました！
END