$30 off During Our Annual Pro Sale. View Details »

CSS design independent of Sass

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

CSS design independent of Sass

Avatar for takanorip

takanorip

October 03, 2019
Tweet

More Decks by takanorip

See All by takanorip
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
1.1k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
0
820
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
590
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.5k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
220
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
980
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.6k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.1k
早わかり W3C Community Group
Avatar for takanorip takanorip
0
540

Other Decks in Technology

See All in Technology
re:Invent 2025 ~何をする者であり、どこへいくのか~
Avatar for tetutetu214 tetutetu214
0
220
EM歴1年10ヶ月のぼくがぶち当たった苦悩とこれからへ向けて
Avatar for maaaato maaaato
0
280
生成AIを利用するだけでなく、投資できる組織へ / Becoming an Organization That Invests in GenAI
Avatar for 株式会社カミナシ kaminashi
0
100
今年のデータ・ML系アップデートと気になるアプデのご紹介
Avatar for Nayuta S. nayuts
1
460
1人1サービス開発しているチームでのClaudeCodeの使い方
Avatar for おーしろ noayaoshiro
1
280
Microsoft Agent 365 についてゆっくりじっくり理解する！
Avatar for skmkzyk skmkzyk
0
370
AI-DLCを現場にインストールしてみた：プロトタイプ開発で分かったこと･やめたこと
Avatar for Recruit recruitengineers
PRO
2
150
打 造 A I 驅 動 的 G i t H u b ⾃ 動 化 ⼯ 作 流 程
Avatar for Bo-Yi Wu appleboy
0
350
re:Invent 2025 ふりかえり 生成AI版
Avatar for TakaakiKakei takaakikakei
1
210
Fashion×AI「似合う」を届けるためのWEARのAI戦略
Avatar for ZOZO Developers zozotech
PRO
2
810
WordPress は終わったのか ～今のWordPress の制作手法ってなにがあんねん？～ / Is WordPress Over? How We Build with WordPress Today
Avatar for tbshiki tbshiki
1
800
品質のための共通認識
Avatar for KAKEHASHI kakehashi
PRO
3
260

Featured

See All Featured
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
331
21k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
8
1.3k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k

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