CSS design independent of Sass

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

CSS design independent of Sass

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

October 03, 2019
Tweet

More Decks by takanorip

See All by takanorip
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
110
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
4
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
5
3.1k
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
6
870
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
2.1k
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
2
400
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
730
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
22
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
33

Other Decks in Technology

See All in Technology
C732029414e4c194b34639341e5eb199?s=48 logico
2
160
3623c11f38517055d9040073ed81913b?s=48 endoumari
3
910
47982be7ff38d38f65eb179dbdfb24f5?s=48 katsuya414
1
390
53850955f15249a1a9dc49df6113e400?s=48 line_developers
2
970
13d64bff196e33cc6b352f226137d16e?s=48 monoqlo
7
480
55c8dbd8bc4374c44d83b328fbba4b21?s=48 antje
2
140
53850955f15249a1a9dc49df6113e400?s=48 line_developers
4
350
53e2d354b3299d64a54af680865516d5?s=48 satotakeshi
3
710
6ca998e3a07596f141597da0d2983ecc?s=48 0si43
2
260
Cd823abda454a7a2065fe6fe273ae84b?s=48 viva_tweet_x
1
390
B2fefbb30aba7c25bbe0c8819791631a?s=48 gunnargrosch
1
290
13d936e697fe0f4fa96f926d0a712f6c?s=48 sansanbuildersbox
3
120

Featured

See All Featured
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
110k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
260
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
36k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
510
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
153
6.2k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
69
1.3k
A16eb159db895e3b01d3dc95767ad595?s=48 jonyablonski
6
660
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
250
11k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
282
18k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
87
13k
282d599b414022eba5096510f675b6e2?s=48 chrislema
170
14k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k

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. 良い例

  13. None

  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. おわり！