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
2
1.1k

CSS design independent of Sass

Avatar for takanorip

takanorip

October 03, 2019
Tweet

More Decks by takanorip

See All by takanorip
「見せる」登壇資料デザインの極意
Avatar for takanorip takanorip
2
660
Design System Documentation Tooling 2025
Avatar for takanorip takanorip
3
2.5k
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
Avatar for takanorip takanorip
1
970
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
690
Bulletproof Design System with TypeScript
Avatar for takanorip takanorip
7
4.8k
Eleventy3.0 で始める爆速個人ブログ開発！
Avatar for takanorip takanorip
0
260
Webフォント選定の極意！フォントの基本から最新トレンドまで徹底解説
Avatar for takanorip takanorip
5
1k
効果的な管理画面を デザインをするために 避けるべき5つの罠
Avatar for takanorip takanorip
15
7.8k
社内管理画面のデザインもプロダクトデザイン
Avatar for takanorip takanorip
5
2.2k

Other Decks in Technology

See All in Technology
TypeScript 7.0の現在地と備え方
Avatar for uhyo uhyo
7
1.9k
JAWS DAYS 2026 AWS知識・技術力を使って隠された旗をゲットせよ！〜出張版「ごーとんカップ」〜 解説編
Avatar for 株式会社カミナシ kaminashi
0
110
今のWordPress の制作手法ってなにがあんねん？(改) / What’s the Deal with WordPress Development These Days?
Avatar for tbshiki tbshiki
0
510
2026-03-11 JAWS-UG 茨城 #12 改めてALBを便利に使う
Avatar for SUZUKI Masashi masasuzu
2
400
ガバメントクラウドにおけるAWSの長期継続割引について
Avatar for takeda_h takeda_h
2
5.3k
俺の/私の最強アーキテクチャ決定戦開催 ― チームで新しいアーキテクチャに適合していくために / 20260322 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
0
110
Claude Code 2026年 最新アップデート
Avatar for Oikon oikon48
14
11k
GCASアップデート（202601-202603）
Avatar for 高橋広和 techniczna
0
220
生成AIで速度と品質を両立する、QAエンジニア・開発者連携のAI協調型テストプロセス
Avatar for butatamasoba / Shota Kusaba shota_kusaba
0
200
2026年もソフトウェアサプライチェーンのリスクに立ち向かうために / Product Security Square #3
Avatar for GMO Flatt Security flatt_security
1
670
夢の無限スパゲッティ製造機 #phperkaigi
Avatar for hideki kinjyo o0h
PRO
0
180
ソフトバンク流！プラットフォームエンジニアリング実現へのアプローチ
Avatar for SoftBank Tech Night sbtechnight
1
200

Featured

See All Featured
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.9k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
75
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
48k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
150
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.7k
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
220
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k

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