CSS design independent of Sass

Transcript

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

   View Slide

2. 自己紹介
   • 大木尊紀 / takanorip
   • フロントエンドエンジニア
   • Figma、ウェブフォント、Web Components
   • 最近のマイブーム：

   良い写真撮れたらsuzuriでシャツ作ること
   

   View Slide

3. Sass使ってますか？
   

   View Slide

4. Sass is useful!
   

   View Slide

5. But,
   

   View Slide

6. Too FAT!!!
   

   View Slide

7. Sassは機能が多すぎる
   • 便利だけど使いこなすのが難しいし、

   機能が多すぎて把握できない。
   • 注意が必要な機能もある。

   （@mixin、@extend、ネスト、など）
   • Sassの機能を使うことが目的になってない？
   

   View Slide

8. Sassに頼らずシンプルに
   CSS設計をするのが良さそう

   （あくまで個人の見解です）
   

   View Slide

9. 1. 上書きをなくす
   

   View Slide

10. 悪い例
    

    View Slide

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

    View Slide

12. 良い例
    

    View Slide

13. View Slide

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

    View Slide

15. CSSのDRYは諦める
    

    View Slide

16. Custom properties
    

    View Slide

17. Custom properties
    • 別名CSS変数
    

    View Slide

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

    View Slide

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

    View Slide

20. 2. ScopedなCSSを書く
    

    View Slide

21. ScopedなCSSを書く方法
    • BEM、FLOCSSなどの命名規則を取り入れる
    • CSS Modules、CSS in JS

    （styled-components、emotionなど）
    • Shadow DOMを使う
    

    View Slide

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

    View Slide

23. 3. フラットなCSSを書く
    

    View Slide

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

    View Slide

25. ネストを深くするのは
    最終手段
    

    View Slide

26. おわり！
    

    View Slide