Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS design independent of Sass

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

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
1
8.6k
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
7
3k
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
130
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
29
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
240
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
100
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
1k
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
80
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
5
3.4k

Other Decks in Technology

See All in Technology
40638b9e3a098313234f358d35103735?s=48 y150saya
5
4.4k
93dcbac1a838bbec898747bb92aa47cc?s=48 sadonosake
0
140
8a1af77e438c19487b710e1f0ec95df3?s=48 ushigai
0
330
0a60519567997c093a11175b27c35b16?s=48 riita10069
0
220
7cd783377515bdf8207062840b7b2f4e?s=48 soracom
PRO
0
180
E6d26a51159a7863cac28e9d12ccd389?s=48 rmakiyama
4
4.7k
394576121c6b861048493988254160dd?s=48 tarappo
0
220
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
0
2.5k
A967476c5855d593710a9a580f6b2aed?s=48 kaelaela
1
120
9a6e4623f9314c5e1fc99635ac9617ed?s=48 nkzn
1
180
Daceaf394dd65b4542fa00181f2cc2d5?s=48 maidol
0
1.9k
Da5a59469ce3ebb55619ce34f85f8c4f?s=48 syarihu
1
4.1k

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.8k
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
778
200k
88bc30284c6a424b63a92aad27d0ba36?s=48 jnunemaker
PRO
43
4.9k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
950
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
105
11k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
415
58k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
223
120k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
99
5.7k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
372
43k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
930
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
37
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. おわり！