社内勉強会用資料 BEMの基礎とCSSを組む際に気をつけたいこと

1. CSSと仲良くなろう

2. ⽬的
• BEMの理解を深める
• BEMに沿った改修ができるようになる
• 崩れにくいCSSを組めるようになる

3. おしながき
• ⽬的
• BEMの説明
• アンチパターンと解決案
• その他、気をつけるポイント

4. BEMってなんだ？

5. BEMとは
• CSSの命名規則のこと
• Block-Element-Mofifierの略
• 基本的にシングルクラス
• HTMLとCSSを疎結合にする
（タグにはスタイルを当てない）

6. Block-Element-Modifier
Block：独⽴して再利⽤できるもの（⾚）
Element：Blockの構成要素（⻘、紫）
Modifier：B-Eの状態が変わったもの（紫）
※サンプルSP会社詳細タブ

7. 書き⽅のルール
• Eはアンスコx2区切り
• Mはハイフンx2区切り
• シングルクラス
• タグにスタイルを当てない

8. BEMを使うと良いこと
• コンポーネントの再利⽤性が⾼い
• 読みやすい
• クラス名の衝突が起こりづらい
• 詳細度が上がらない
• DOM構造に依存しない

9. アンチパターンと解決策

10. エレメントのみのコピペ
解決策
-> header-top__nav-dropdownを再定義する

11. ブロックの外側にエレメント
解決策
-> 別ブロックにする or ブロックを1つ親に設定

12. ブロックの密結合
解決策
-> 同じブロックにする

13. その他、気をつけるポイント

14. floatの解除
解除しないと⾼さが0になり崩れの原因に🐛
floatしたら必ずclearfixしましょう

15. 可変⻑の組み⽅
⽂字数が増えたときにも崩れないか確認したい

16. 浮かせた要素が被る
兄弟要素なのに⽚⽅が覆いかぶさっている
ボタンの下にテキストが⼊ってしまったり
⽚⽅が押せなくなるため被らないようにする

17. clickable、hoverableエリア
押せるエリアとホバーするエリアが違う
押せるエリアも注意しないと
テキストしか押せないボタンなどが⽣まれてしまう
ため注意が必要

18. 参考記事
• BEM を使うべき5つの理由（なぜ BEM が G.R.E.A.T といえるのか） -
Frasco
• BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
• 細かすぎるけど伝わってほしい私的BEMプラクティス30