Download as PDF, PPTX
モダンCSS設計と BEMという開発手法
- 1.
- 2.
- 3. よりよいCSSのゴール • 予測しやすい • 再利用しやすい •保守しやすい • 拡張しやすい
- 4.
- 5. モダンサイト構築の ワークフロー • 近年はHTMLで動的なデザインを確認しながら進めるのが主流。 • そこでCSSもある程度の変更に耐えうる、または変更に改修でき る設計であることが求められる。（例えば左右のカラムを入れ替 えるなど。） •このような入れ替えをしやすくする基本設計として、要素を部品 ＝モジュール、コンポーネントと考える設計が求められている。
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. BEM? • Block • Element •Modifier • ロシアのYandexのフロントエンド開発シームが考 えた開発手法。
- 17.
- 18.
- 19.
- 20. Modifier <div class=“alert alert_warning”> <h2class=“alert_ _ title”> … </div> <h2 class=“alert_ _ body”> … </div> </div>
- 21. Modifier .alert { … } .alert_warning{ … } • ModiferはBlock、またはElementのバージョン違いである •Bootstrapなどではいずれのクラス名もalert-という命名規 則になる。その名前だけではクラスの持つ機能の区別がで きない。 • アンダーバー１個はモディファイ（パターン） • アンダーバー２個はエレメント（エレメント）
- 22.
- 23. ここで重要なこと • ElementとModiferのを明確にすること • クラス名にアンダースコアを使うかどうかは重要で はない •BEMのエッセンスを取り入れ、再定義してもよい • 重要なのは、定義したルールが全体を通して一貫し ているかどうか
- 24. 例えば Element ◎◎◎ _ _△△△ Modifer ◎◎◎ - - △△△
- 25. ハイフンの役割は？ .search-box { …} .search-box - - warning{ … } .search-box _ _ title { … } • ハイフン一つは、コンポーネントの関係を示すこと 以外の用途に活用
- 26.
- 27.