社内LT。超ライトな内容ですが、CSS設計の話をしてます。

1. モダンCSS設計と
BEMという開発手法
kenji karahashi

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

3. よりよいCSSのゴール
• 予測しやすい
• 再利用しやすい
• 保守しやすい
• 拡張しやすい

4. 破綻しやすいCSS
• HTMLの構造に依存している
• スタイルを取り消している
• 絶対値を多様している

5. モダンサイト構築の
ワークフロー
• 近年はHTMLで動的なデザインを確認しながら進めるのが主流。
• そこでCSSもある程度の変更に耐えうる、または変更に改修でき
る設計であることが求められる。（例えば左右のカラムを入れ替
えるなど。）
• このような入れ替えをしやすくする基本設計として、要素を部品
＝モジュール、コンポーネントと考える設計が求められている。

6. –斉藤裕也氏
壊れない完璧なCSS設計を求めるのではなく、
壊れたときに勇気をもって修復できる設計を

7. 素直にセレクタを書いていくと、セレクタの数が多く、
複雑になる。
その結果、セレクタの詳細度を高めてメンテナンス効率
を下げます。

8. セレクタの
4つの
リファクタリングの考え方

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

10. ２ セレクタを短くす
る

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

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

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

14. BEM
https://bem.info/

15. BEM?
• Block
• Element
• Modifier
• ロシアのYandexのフロントエンド開発シームが考
えた開発手法。

17. bootestrapの場合
.alert {
…
}
.alert-success {
…
}
.alert-warrning {
…
}

18. Block
.alert {
…
}

19. Element
.alert-successの部分がElement
.alert-title{
…
}
.alert_ _ title{
…
}
一般的 BEM

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

21. Modifier
.alert {
…
}
.alert_warning{
…
}
• ModiferはBlock、またはElementのバージョン違いである
• Bootstrapなどではいずれのクラス名もalert-という命名規
則になる。その名前だけではクラスの持つ機能の区別がで
きない。
• アンダーバー１個はモディファイ（パターン）
• アンダーバー２個はエレメント（エレメント）

22. メリット
• 先頭にaleat-と命名することで、どれがコンポーネ
ントを構成する要素であるか明らかに出来る
• 通常よりユニークなので、スタイルの汚染するリス
クを抑えられる

23. ここで重要なこと
• ElementとModiferのを明確にすること
• クラス名にアンダースコアを使うかどうかは重要で
はない
• BEMのエッセンスを取り入れ、再定義してもよい
• 重要なのは、定義したルールが全体を通して一貫し
ているかどうか

24. 例えば
Element
◎◎◎ _ _ △△△
Modifer
◎◎◎ - - △△△

25. ハイフンの役割は？
.search-box { … }
.search-box - - warning{ … }
.search-box _ _ title { … }
• ハイフン一つは、コンポーネントの関係を示すこと
以外の用途に活用

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

27. おわり