モダンCSS設計と BEMという開発手法

kenji karahashi

あとで困るコードを 書いてませんか？

よりよいCSSのゴール

• 予測しやすい

• 再利用しやすい

• 保守しやすい

• 拡張しやすい

破綻しやすいCSS

• HTMLの構造に依存している

• スタイルを取り消している

• 絶対値を多様している

モダンサイト構築の ワークフロー

• 近年はHTMLで動的なデザインを確認しながら進めるのが主流。

• そこでCSSもある程度の変更に耐えうる、または変更に改修できる設計であることが求められる。（例えば左右のカラムを入れ替えるなど。）

• このような入れ替えをしやすくする基本設計として、要素を部品＝モジュール、コンポーネントと考える設計が求められている。

–斉藤裕也氏

壊れない完璧なCSS設計を求めるのではなく、 壊れたときに勇気をもって修復できる設計を

素直にセレクタを書いていくと、セレクタの数が多く、複雑になる。

その結果、セレクタの詳細度を高めてメンテナンス効率を下げます。

セレクタの 4つの

リファクタリングの考え方

１　要素セレクタを 省略する

２　セレクタを短くする

３　セレクタを限定的にする

４　クラスセレクタを活用する

命名規則をもっと 深堀りしてみよう

BEM https://bem.info/

BEM?• Block

• Element

• Modifier

• ロシアのYandexのフロントエンド開発シームが考えた開発手法。

bootestrapの場合.alert { … }

.alert-success { … }

.alert-warrning { … }

Block

.alert { … }

Element.alert-successの部分がElement

.alert-title{ … }

.alert_ _ title{ … }

一般的 BEM

Modifier

<div class=“alert alert_warning”> <h2 class=“alert_ _ title”> … </div> <h2 class=“alert_ _ body”> … </div>

</div>

Modifier.alert { … }

.alert_warning{ … }

• ModiferはBlock、またはElementのバージョン違いである

• Bootstrapなどではいずれのクラス名もalert-という命名規則になる。その名前だけではクラスの持つ機能の区別ができない。

• アンダーバー１個はモディファイ（パターン）

• アンダーバー２個はエレメント（エレメント）

メリット

• 先頭にaleat-と命名することで、どれがコンポーネントを構成する要素であるか明らかに出来る

• 通常よりユニークなので、スタイルの汚染するリスクを抑えられる

ここで重要なこと• ElementとModiferのを明確にすること

• クラス名にアンダースコアを使うかどうかは重要ではない

• BEMのエッセンスを取り入れ、再定義してもよい

• 重要なのは、定義したルールが全体を通して一貫しているかどうか

例えば

Element ◎◎◎ _ _ △△△

Modifer ◎◎◎ - - △△△

ハイフンの役割は？

.search-box { … }

.search-box - - warning{ … }

.search-box _ _ title { … }

• ハイフン一つは、コンポーネントの関係を示すこと以外の用途に活用

• 他にもキャメルケースなど活用して、より汎用的なルールセットが世界中で開発されている

おわり