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
580

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
7
2.8k
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
99
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
22
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
180
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
82
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
720
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
68
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
5
3.3k
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
6
1.1k

Other Decks in Technology

See All in Technology
5b47136bedcba2799edf4fcd27ea66d7?s=48 yaegashi
0
160
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
2
170
9b2600a82821673d9d0f03cc6f7bc56e?s=48 kloudleinc
0
270
D7e58c3627cba51ea08a554ccdb15d16?s=48 mita2
0
210
164fd510e92a1912155b869b2c333c1e?s=48 tutuz
5
3.1k
A84b3c763c9c543069b7c02551e2720e?s=48 yuyamada
0
510
Cbc297b07593321e52c75a9ebcc0f843?s=48 jacopen
3
450
E53046bb9794560f541fcf2cf0b9d526?s=48 sayokomiura
0
630
C0c0e8e4d7f83912cb1b1a0699df82a5?s=48 miyakemito
0
170
50bc42471d197d0dbef7171f2ef85bb6?s=48 comucal
PRO
0
170
D69e77fd50edf1a9c6d5ffcddd03dd90?s=48 funnysystems
1
1.2k
88dae28e3d082236f37db2f5c2db339d?s=48 keropiyo
0
260

Featured

See All Featured
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.8k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
62
9.9k
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
104
6.3k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
257
20k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1346
200k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
203
20k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
116
10k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
73
270k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
258
36k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
32
3.5k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
47k

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