Download as PDF, PPTX
Recommended
More Related Content
What's hot
Viewers also liked
Similar to モダンCSS設計と BEMという開発手法
モダンCSS設計と BEMという開発手法
- 1.
- 2.
- 3.よりよいCSSのゴール• 予測しやすい• 再利用しやすい•保守しやすい• 拡張しやすい
- 4.破綻しやすいCSS• HTMLの構造に依存している• スタイルを取り消している•絶対値を多様している
- 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.