CSS design independent of Sass

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
October 03, 2019
Technology
2
520

CSS design independent of Sass

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

October 03, 2019
Tweet

Want more?

78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
5
2.9k
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
6
840
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
2k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
42
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
2
94
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
140
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
1
210
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
370
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
100
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
190
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
60
250k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
5
780

Transcript

  1. 1.

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

  2. 2.

    自己紹介 • 大木尊紀 / takanorip • フロントエンドエンジニア • Figma、ウェブフォント、Web Components

    • 最近のマイブーム：
 良い写真撮れたらsuzuriでシャツ作ること
  3. 3.

    Sass使ってますか？

  4. 4.

    Sass is useful!

  5. 5.

    But,

  6. 6.

    Too FAT!!!

  7. 7.

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

  8. 8.

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

  9. 9.

    1. 上書きをなくす

  10. 10.

    悪い例

  11. 11.

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

  12. 12.

    良い例

  13. 13.
    None
  14. 14.

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

  15. 15.

    CSSのDRYは諦める

  16. 16.

    Custom properties

  17. 17.

    Custom properties • 別名CSS変数

  18. 18.

    Custom properties • :root = <html> • 親要素で定義されたCustom propertiesは子 要素でも参照できる

    • var()で変数を参照する • var(variable, default)
  19. 19.

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

    便利（ダークテーマ対応とか）
  20. 20.

    2. ScopedなCSSを書く

  21. 21.

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

    Shadow DOMを使う
  22. 22.

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

  23. 23.

    3. フラットなCSSを書く

  24. 24.

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

  25. 25.

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

  26. 26.

    おわり！