This presentation is about BEM and CSS architecture.

1. BEMについて
⼀緒に考えてみませんか
# Presented by 齋藤克弘
2019.4.14 SUN
# TECH::EXPERT # チーム開発 # 勉強会 # CSS設計

2. はじめに
l僕もみなさんもやりたいことは同じ。
- 最終課題をより良いものにしたい！
l 『建設的議論』のススメ | ×ケンカ
- お互いの知識を深め合うことができる。
- プロジェクトの完成度を⾼めることができる。
l僕はまだまだ未熟者
- ⾃分が絶対に正しいとは思ってません。
- だから、皆さんからのご意⾒・ダメ出し⼤歓迎！
1

3. I respect your code.
I respect your opinion.
I respect you.

4. 今⽇、お伝えしたいこと
lBEMによる命名規則をできるだけ守る
- クラス名の衝突を避けられる。
- スタイルの影響範囲がわかりやすくなる。
lscssファイルは1Blockにつき、1ファイル作成
- その際、scssファイル名は“_Block名.scss”にする。
×block名: footer-about ファイル名: _footer-bottom.scss
○block名: footer-about ファイル名: _footer-about.scss
3

5. CSS設計って？
「CSSを記述するときのルール」
• このルールがしっかりしていないと、プロジェクトは破綻
• 複数⼈で作業するときは特に要注意
CSS設計はプロジェクトの『⼟台』
• BEMはCSS設計の1つ。
4

6. BEMって？
l 要素を「Block」「Element」「Modifier」の3つ分ける。
l クラス名の『厳格な命名規則』が特徴。
l 原則として、クラスセレクタを⽤いる。
Block: menu
Element: menu__item
Modifier: menu__item--current
例） mindBEMding
5

7. 本家メルカリのCSS設計
OOCSS (Object-Oriented CSS)に近い設計
• 構造と⾒た⽬を切り離す。
• デザインに関するCSSを書いたクラス名をHTMLに与えて⾒た⽬を作る。
// 商品名
.font-2 {
font-size: 16px;
font-weight: 400;
color: #333;
}
// ログインボタン
.btn-red {
background: #ea352d;
border: 1px solid #ea352d;
color: #fff;
}
// 値段
.font-5 {
font-size: 20px;
font-weight: 600;
color: #333;
}
6

8. CSS設計 - 料理の⼿法みたいなもの
本家メルカリ
イタリアン料理
(OOCSSっぽいやつ)
• 本家メルカリと僕らのメルカリは違う料理⼿法（CSS設計）。
• 複数の料理⼿法を適当に混ぜると、ヘンテコな料理に。
• それぞれの⽅法論を融合させるなら、とても慎重に。
僕らのメルカリ
⽇本料理
(BEM)
7

9. 今の問題点って？
l クラス名が被ってしまうかもしない。
.btn-sns-facebook {
margin: 16px 0 0;
background: #385185;
color: #fff;
}
.btn-sns-facebook {
margin: 14px 0 0;
display: inline-block;
…..
}
Aさん Bさん
衝突
l ⼀々、クラス名がすでに使われていないか確かめないといけない。
8

10. BEMの命名規則を守れば被らない
lCSSがBlock毎に独⽴しているから、変更時も影響範囲がわかりやすい。
.login__btn--facebook {
margin: 16px 0 0;
background: #385185;
color: #fff;
}
.footer__btn--facebook {
margin: 14px 0 0;
display: inline-block;
…..
}
Aさん Bさん
9

11. それでも残る問題点
l Block名が被ってしまうかもしない。
ここのBlock名は
”app-banner”にしよう！
ここのBlock名は
”app-banner”にしよう！
.app-banner {
width: 100%;
…..
}
.app-banner {
width: 600px:
…..
}
10

12. scssファイルは1Blockにつき1つ / ”_Block名.scss”
lこの2つのルールを守れば、Block名は被らない。
同名のファイルは複数保存できないから。
11

13. おまけ - より良いscssを書くために①
l何度も同じCSSを書かなきゃいけないときは、mixinを使う。
// _mixin.scss
@mixin banner-background($background-image) {
background: $background-image;
background-size: auto 100%;
background-position: center;
}
// _vegitable.scss
.vegitable {
&__tomate {
@include banner-background(“tomate.jpg”);
}
&__onion {
@include banner-background(“onion.jpg”);
}
&__potato {
@include banner-background(“potato.jpg”);
}
}
12

14. おまけ - より良いscssを書くために②
l SCSSでは、アンパサンド（&）を活⽤する。
- クラス名を変更する際、変更箇所が少なくて済む。
. vegitable {
&__tomate {
@include banner-background(“tomate.jpg”);
}
&__onion {
@include banner-background(“onion.jpg”);
}
&__potato {
@include banner-background(“potato.jpg”);
}
}
.vegitable {
.vegitable__tomate {
@include banner-background(“tomate.jpg”);
}
.vegitable__onion {
@include banner-background(“onion.jpg”);
}
.vegitable__potato {
@include banner-background(“potato.jpg”);
}
}
13

15. まとめ
lBEMによる命名規則をできるだけ守る
- クラス名の衝突を避けられる。
- スタイルの影響範囲がわかりやすくなる。
lscssファイルは1Blockにつき、1ファイル作成
- その際、scssファイル名は“_Block名.scss”にする。
×block名: footer-about ファイル名: _footer-bottom.scss
○block名: footer-about ファイル名: _footer-about.scss
14

16. 参考サイト
lBEM 公式ドキュメント
- https://en.bem.info/methodology/
15
lQiita ⼀番詳しいCSS設計規則BEMのマニュアル
- https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1
lmaesblog BEMをSassで快適に書く⽅法
- https://mae.chab.in/archives/2553
lUK MILK より良いCSSを書くための様々なCSS設計まとめ
- https://uxmilk.jp/43386