CSS design independent of Sass

Transcript

1. Sassに頼らない CSS設計 Takanori Oki @Meguro.css 2019/10/03
2. 自己紹介 • 大木尊紀 / takanorip • フロントエンドエンジニア • Figma、ウェブフォント、Web Components • 最近のマイブーム：
 良い写真撮れたらsuzuriでシャツ作ること
3. Sass使ってますか？
4. Sass is useful!
5. But,
6. Too FAT!!!
7. Sassは機能が多すぎる • 便利だけど使いこなすのが難しいし、
 機能が多すぎて把握できない。 • 注意が必要な機能もある。
 （@mixin、@extend、ネスト、など） • Sassの機能を使うことが目的になってない？
8. Sassに頼らずシンプルに CSS設計をするのが良さそう
 （あくまで個人の見解です）
9. 1. 上書きをなくす
10. 悪い例
11. CSSの上書きが発生してる！
12. 良い例
14. こういう悪い例は 過度な共通化をしている 場合に発生しがち
15. CSSのDRYは諦める
16. Custom properties
17. Custom properties • 別名CSS変数
18. Custom properties • :root = <html> • 親要素で定義されたCustom propertiesは子 要素でも参照できる • var()で変数を参照する • var(variable, default)
19. Theming • 色やフォントの大きさなど、パーツの装飾要 素をCustom propertiesで定義し、それを利 用することでstyleを統一する。 • 過度な共通化を防げる • 全体のテーマなどを一気に変更したいときに 便利（ダークテーマ対応とか）
20. 2. ScopedなCSSを書く
21. ScopedなCSSを書く方法 • BEM、FLOCSSなどの命名規則を取り入れる • CSS Modules、CSS in JS
 （styled-components、emotionなど） • Shadow DOMを使う
22. ScopedなCSSを書くために Sassは必要ない
23. 3. フラットなCSSを書く
24. ネストの深いCSSの闇 • 検索しにくいので開発効率が落ちる • 詳細度との戦いがつらい • 可読性が落ちる、見にくい
25. ネストを深くするのは 最終手段
26. おわり！