CSS design independent of Sass

by takanorip

Slide 1

Slide 1 text

Sassに頼らない CSS設計 Takanori Oki @Meguro.css 2019/10/03

Slide 2

Slide 2 text

自己紹介 • 大木尊紀 / takanorip • フロントエンドエンジニア • Figma、ウェブフォント、Web Components • 最近のマイブーム：  良い写真撮れたらsuzuriでシャツ作ること

Slide 3

Slide 3 text

Sass使ってますか？

Slide 4

Slide 4 text

Sass is useful!

Slide 5

Slide 5 text

But,

Slide 6

Slide 6 text

Too FAT!!!

Slide 7

Slide 7 text

Sassは機能が多すぎる • 便利だけど使いこなすのが難しいし、  機能が多すぎて把握できない。 • 注意が必要な機能もある。  （@mixin、@extend、ネスト、など） • Sassの機能を使うことが目的になってない？

Slide 8

Slide 8 text

Sassに頼らずシンプルに CSS設計をするのが良さそう  （あくまで個人の見解です）

Slide 9

Slide 9 text

1. 上書きをなくす

Slide 10

Slide 10 text

悪い例

Slide 11

Slide 11 text

CSSの上書きが発生してる！

Slide 12

Slide 12 text

良い例

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

こういう悪い例は過度な共通化をしている場合に発生しがち

Slide 15

Slide 15 text

CSSのDRYは諦める

Slide 16

Slide 16 text

Custom properties

Slide 17

Slide 17 text

Custom properties • 別名CSS変数

Slide 18

Slide 18 text

Custom properties • :root = • 親要素で定義されたCustom propertiesは子要素でも参照できる • var()で変数を参照する • var(variable, default)

Slide 19

Slide 19 text

Theming • 色やフォントの大きさなど、パーツの装飾要素をCustom propertiesで定義し、それを利用することでstyleを統一する。 • 過度な共通化を防げる • 全体のテーマなどを一気に変更したいときに便利（ダークテーマ対応とか）

Slide 20

Slide 20 text

2. ScopedなCSSを書く

Slide 21

Slide 21 text

ScopedなCSSを書く方法 • BEM、FLOCSSなどの命名規則を取り入れる • CSS Modules、CSS in JS  （styled-components、emotionなど） • Shadow DOMを使う

Slide 22

Slide 22 text

ScopedなCSSを書くために Sassは必要ない

Slide 23

Slide 23 text

3. フラットなCSSを書く

Slide 24

Slide 24 text

ネストの深いCSSの闇 • 検索しにくいので開発効率が落ちる • 詳細度との戦いがつらい • 可読性が落ちる、見にくい