Embed Size (px)
DESCRIPTION
BEMがどんなものなのかを共有する勉強会
Citation preview
BEMを『ちょっと』学ぼう株式会社gumi 原口 剛
2014/01/06
14年1月7日火曜日
自己紹介
原口 剛(はらぐち ごう)
株式会社gumi
UIエンジニア
スマホブラウザゲーム Ghrgc
14年1月7日火曜日
14年1月7日火曜日
14年1月7日火曜日
BEMを知りましょう
14年1月7日火曜日
BEMとは
ロシアのYandex社が発表
Block Element Modifierの略
わかりやすい命名規則
14年1月7日火曜日
BEMとは
構成する要素をBlock、Element、Modifierのどれかに当てはめる
基本的にシングルクラス
14年1月7日火曜日
<div class="block"> <div class="block__element--modifier"> --------- </div></div>
14年1月7日火曜日
1, BLOCK
可搬性がある部品のまとまり
ボタン
ヘッダー
メニュー
14年1月7日火曜日
<div class="block">
<div class="block__element--modifier"> --------- </div></div>
14年1月7日火曜日
2, ELEMENT
Blockを構成する子要素
ボタンのアイコン
ヘッダーのロゴ
メニューの項目
14年1月7日火曜日
<div class="block">
<div class="block__element--modifier"> --------- </div></div>
14年1月7日火曜日
3, MODIFIER
BlockやElementの派生
ボタンの色
ヘッダーロゴの種類
メニュー項目のブレットの種類
14年1月7日火曜日
<div class="block">
<div class="block__element--modifier"> --------- </div></div>
14年1月7日火曜日
BEMはクラス名の命名規則
14年1月7日火曜日
BEM と DOM
Block単位でDOMへ配置
Block、Element、Modifierにあたる要素それぞれにクラス付与
DOMノードは、3要素を組み合わせたクラス名で識別できる
14年1月7日火曜日
BEMを適用
14年1月7日火曜日
CSS命名規則
Block、Element、ModifierへCSSクラス名を付与
14年1月7日火曜日
CSS命名規則BLOCKのクラス名
button
heading
menu
ルート要素名
14年1月7日火曜日
CSS命名規則
14年1月7日火曜日
CSS命名規則ELEMENTのクラス名
button__icon
heading__logo
menu__itemElement名の前にアンダーバー2個(__)で連結
14年1月7日火曜日
CSS命名規則
14年1月7日火曜日
CSS命名規則MODIFIERのクラス名
button--color-blue
heading--level-alpha
menu__item--pos-firstModifier名の前にハイフン2個(--)で連結
14年1月7日火曜日
CSS命名規則
14年1月7日火曜日
メリット
命名規則でスタイル指定を集約できる
シングルクラスでスタイル実装を完結するので不意なカスケーディングの算出結果に悩まされない
14年1月7日火曜日
Not カスケーディングBlock(ルート要素)のスタイル実装
Block内のElement(子要素)のスタイル実装
追加の派生スタイルは、Modifierで実装
14年1月7日火曜日
Doesn’t it cover 90% of your styling needs?
Max Shirshin
14年1月7日火曜日
わたしとBEM
多人数がcssを編集する
影響範囲を限定したスタイル実装
cssのモジュール化
14年1月7日火曜日
わたしとBEM
多人数がcssを編集する
影響範囲を限定したスタイル実装
cssのモジュール化
14年1月7日火曜日
CSSクラスの命名に苦労したくない
柔軟な命名をさせない
構造・命名に秩序をもつ
皆が同じ命名規則を認識する
14年1月7日火曜日
命名規則
CSS命名規則に一貫性を持たせる
不要な個性を排除
14年1月7日火曜日
わたしとBEM
多人数がcssを編集する
影響範囲を限定したスタイル実装
cssのモジュール化
14年1月7日火曜日
影響範囲を限定Block内のスタイル指定は、Blockの内側だけで生きる
Block外からはスタイル指定がないのでスタイル指定が衝突(カスケーディング)を回避
Block単位でスタイルを維持するので、リファクタ時のデザイン崩れを回避
14年1月7日火曜日
わたしとBEM
多人数がcssを編集する
影響範囲を限定したスタイル実装
cssのモジュール化
14年1月7日火曜日
部品(モジュール)
Blockは再利用しやすいようにスタイルガイドに追加
モジュールの単体テストを兼ねてのスタイルガイド
14年1月7日火曜日
念の為に
14年1月7日火曜日
意図しない使われ方
Block内に所属しないElementクラスが付与された場合、すべての定義がグローバルなのでスタイルがあたってしまう
14年1月7日火曜日
意図しない使われ方
14年1月7日火曜日
ネストBlockだけはネストしてしまう
14年1月7日火曜日
クラス名BEMだと長くなりがち
8文字～20文字だと人がデバッグしやすいとされている
独自な単語省略をNG
14年1月7日火曜日
まとめ少ない説明ですぐに触れられる規約
厳格に決められた命名規則なので柔軟な命名を許さない
BEMで説明出来ないHTMLを書いてはいけない
14年1月7日火曜日
まとめ
実装・設計の初期コスト削減
命名規則のブレを小さく出来る
よりセマンティックなマークアップをするようになる
14年1月7日火曜日
BEMってるサイト
14年1月7日火曜日
http://www.lonelyplanet.com/vietnam
14年1月7日火曜日
ご清聴ありがとうございました
14年1月7日火曜日
