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
710

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
14k
共創するためのデザイン批評
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
7
3.2k
Figmaプラグイン 開発のすゝめ
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
180
Headless Components Design
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
43
10分で理解する HTML Modules
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
420
Polymer Project 2020
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
130
技術とデザインの間
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
0
1.4k
Color in Interface Experience
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
1
92
ウェブフォント今昔物語
78f5efc1e98c71e473cc7827de1c5db4?s=48 takanorip
5
3.6k

Other Decks in Technology

See All in Technology
Retca Cloud
7e116e0bb743dee7e0a906f01bd44082?s=48 bau
0
470
SI企業が「アジャイル推し」になったら 幸せになれますか？/Can SI company be happy if it becomes “Agile stan” ?
7977a0896e60587b2690550891be2ea7?s=48 chinmo
1
1.1k
ソフトウェアテスト自動化、一歩前へ
73ffa4b34cfd87eb417ee531b8224d7a?s=48 yoshikiito
1
110
Scrum Fest Osaka 2022 フルリモート下でのチームビルディング
478bd912a17b65fa0ab8c1d81912b9b1?s=48 moritamasami
2
1.1k
QiitaConference2022
0684ef0f8b92614508e0c323c3619462?s=48 fuwasegu
0
170
モブに早く慣れたい人のためのガイド / A Guide to Getting Started Quickly with Mob Programming
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
2
1.8k
WACATE 2022 夏 ワークショップの目的
Add1036688abcb2e3dbff7c3090f7e35?s=48 imtnd
0
120
Implementing Kubernetes operators in Java with Micronaut - TechWeek Java Summit 2022
6ff7b4622483547899dd09918d83732e?s=48 alvarosanchez
0
120
セキュリティ 開運研修2022 / security 2022
A97eee01397705443a72a48ce29d3e19?s=48 cybozuinsideout
PRO
3
3.7k
GeoLocationAnchor and MKTileOverlay
61a68b2172503ecdf7a7f7757df56071?s=48 toyship
0
110
Persistence in Serverless Applications - ServerlessDays NYC
Fd55de4174accaf3b4f030e43a8a70c6?s=48 marcduiker
0
230
インフラのCI/CDはGitHub Actionsに任せた
F5c597c41d9bc6a80cce50adbd6c7bd9?s=48 mihyon
0
110

Featured

See All Featured
The Pragmatic Product Professional
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
19
3k
The Mythical Team-Month
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
209
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
12
920
Web Components: a chance to create the future
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
303
40k
Producing Creativity
Ae14cc4491ac334f9cd23f9f93b4305e?s=48 orderedlist
PRO
334
37k
Code Review Best Practice
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
43
9.2k
5 minutes of I Can Smell Your CMS
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
18k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
105
16k
The Invisible Side of Design
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
290
48k
Web development in the modern age
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
197
9.3k
Embracing the Ebb and Flow
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
73
3.4k

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