SlideShare a Scribd company logo

Bem Study

•
•
Haraguchi Go
Haraguchi Go

BEMがどんなものなのかを共有する勉強会

1 of 48
Downloaded 12 times
BEMを『ちょっと』学ぼう 株式会社gumi 原口 剛 2014/01/06 14年1月7日火曜日
自己紹介 原口 剛(はらぐち ごう) 株式会社gumi UIエンジニア スマホブラウザゲーム 14年1月7日火曜日 Ghrgc
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日火曜日
block block <div class=" <div class=" --------</div> </div> 14年1月7日火曜日 "> __element--modifier">
2, ELEMENT Blockを構成する子要素 ボタンのアイコン ヘッダーのロゴ メニューの項目 14年1月7日火曜日
<div class="block"> __element <div class="block --------</div> </div> 14年1月7日火曜日 --modifier">
3, MODIFIER BlockやElementの派生 ボタンの色 ヘッダーロゴの種類 メニュー項目のブレットの種類 14年1月7日火曜日
<div class="block"> --modifier <div class="block__element --------</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__item Element名の前にアンダーバー2個(__)で 連結 14年1月7日火曜日
CSS命名規則 14年1月7日火曜日
CSS命名規則 MODIFIERのクラス名 button--color-blue heading--level-alpha menu__item--pos-first Modifier名の前にハイフン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://bem.info/ 14年1月7日火曜日
http://www.yandex.com/ 14年1月7日火曜日
http://inuitcss.com/ 14年1月7日火曜日
http://www.lonelyplanet.com/ vietnam 14年1月7日火曜日
ご清聴ありがとう ございました 14年1月7日火曜日

More Related Content

Bem Study