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

CSS design independent of Sass

Avatar for takanorip takanorip
October 03, 2019
Technology
1.1k
2

CSS design independent of Sass

Avatar for takanorip

takanorip

October 03, 2019

More Decks by takanorip

See All by takanorip
AI-Slopなデザインを生まないためのデザインプロセス戦略
Avatar for takanorip takanorip
6
3.9k
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
4
1.2k
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.8k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
1.1k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
800
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
5.2k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
300
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
6
1.1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.9k

Other Decks in Technology

See All in Technology
個人開発で育てる「大規模設計の苗床」 - AI時代の1人開発から始める業務への知識接続 / The Seedbed for Large-Scale Design - From AI-Era Solo Projects to Professional Knowledge
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
1
300
生成 AI 時代にいま一度「問い合わせ」について考えてみる
Avatar for kazzpapa3 kazzpapa3
1
110
複数プロダクトで進めるAI機能実装 ── 実践から得たリアルな学びとロードマップ実現への挑戦 / AICon2026_yanari
Avatar for Rakus_Dev rakus_dev
0
250
LLM/Agent評価：トップ営業の発言を「正解」にする 〜暗黙的正解による評価を営業資産に変える〜
Avatar for Hirotaka takkuhiro
1
240
現場との対話から始める “作る前に問い直す”業務改善
Avatar for mochico50 mochico50
1
140
「守りたい体験」を渡すだけで E2E を生成させられるようになった話
Avatar for May hinac0
2
960
しくみを学んで使いこなそう GitHub Copilot app
Avatar for Toru Makabe torumakabe
2
320
AI時代におけるエンジニアの新たな役割──FDEとクオリアの探求/登壇資料（戸井田 裕貴）
Avatar for Hacobu hacobu
PRO
0
250
Genie Ontologyは銀の弾丸かを考える / Is Genie Ontology a Silver Bullet?
Avatar for NTT docomo Business nttcom
0
430
第67回コンピュータビジョン勉強会CVPR2026読会前編
Avatar for TSUKAMOTO Kenji tsukamotokenji
0
160
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
15
110k
どこまでAIに任せるか 〜確率論と決定論の境界決定〜
Avatar for Shu Kobuchi shukob
0
320

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
330
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.7k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
76
5.3k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
280
The SEO Collaboration Effect
Avatar for Kristina Bergwall kristinabergwall1
1
510
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
490
How to build a perfect <img>
Avatar for Jono Alderson jonoalderson
1
5.8k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.7k

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