Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Utility CSS 2019
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Daniel Fosco
March 18, 2019
Design
0
86
Utility CSS 2019
Updated version of my presentation highlighting the advantages (and pitfalls) of utility-based CSS
Daniel Fosco
March 18, 2019
Tweet
Share
More Decks by Daniel Fosco
See All by Daniel Fosco
Let's talk about design portfolios
dfosco
3
110
UX Design – What, Why, How
dfosco
0
190
Portfolio Talk
dfosco
0
110
Utility CSS
dfosco
2
76
UX Design – Primeiros Passos
dfosco
1
120
CSS Modular — Boas Práticas e Bizus
dfosco
1
110
Other Decks in Design
See All in Design
「デザイン」の自分ごと化から始める、デザインピープルのふるまい
mewmo
PRO
0
160
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
bitkey
PRO
0
250
デザイナーとエンジニアで 同じ山に登ろう
moco1013
0
130
2026年、デザイナーはなにに賭ける?
0b1tk
0
470
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
300
爆速開発でAIプロダクトが40万インプレッションになった話
tsubura
0
160
アクセシビリティ推進を続けられるようにするヒント - Accessibility Conference CHIBA 2025
uto
0
180
デザインを信じていますか
sekiguchiy
1
940
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
pixyzehn
0
130
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
190
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
570
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
1
500
Featured
See All Featured
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
130
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
72
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Crafting Experiences
bethany
1
48
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
430
A Soul's Torment
seathinner
5
2.2k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
How to build a perfect <img>
jonoalderson
1
4.9k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
49k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
1
49
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.9k
Transcript
UTILITY CSS
WHAT
WHAT HOW
WHAT HOW AND WHY
WHAT IS ATOMIC CSS FUNCTIONAL CSS
ATOMIC DESIGN BRAD FROST
None
None
.padding-small { padding: 15px; } .white { color: white }
.bg-blue { background-color: blue; }
None
None
.u-display-block { display: block } .u-display-inline { display: inline }
.u-display-inline-block { display: inline-block } .u-position-relative { position: relative }
None
None
None
None
None
None
REFACTOR ALL THE STYLES!
INSPIRATION TO MAKE OUR CSS MORE... CONSISTENT MANTAINABLE PERFORMANT
CONSISTENCY
None
None
GOOD DEFAULTS SENSIBLE SCALE
None
None
None
None
THE GOOD OPTIONS ARE YOUR ONLY OPTIONS
YOU DON'T WRITE CSS YOU JUST USE CSS
WRITE MARKUP
WRITE MARKUP → SAVE
WRITE MARKUP → SAVE → REFRESH
DEMO
MANTAINABILITY
None
FUNCTIONAL CSS FUNCTIONAL PROGRAMMING
PURE FUNCTIONS
FOR A GIVEN INPUT THE OUTPUT WILL ALWAYS BE THE
SAME
X × 2
2 × 2 → 4
2 × 2 → 4 3 × 2 → 6
2 × 2 → 4 3 × 2 → 6
2 × 2 → 5
.class { color: blue }
.another { color: red } .class { color: blue }
None
STYLES DON'T OVERWRITE EACH OTHER NO SIDE-EFFECTS
YOU DON'T NEED TO KEEP TRACK OF YOUR CSS
PERFORMANCE
The Problem with CSS
None
None
None
184
123
499
.db { display: block }
.fl { float: left }
None
WHAT DOES THIS MEAN IN REAL LIFE?
None
None
508KB TO 175KB 65% REDUCTION
IT CAN BE MADE EVEN SMALLER
m.booking.com
REFACTORING CSS HOLDS VERY LITTLE BUSINESS VALUE
How can we explore Atomic CSS to improve our user
experience and development process?
THANKS! !
bit.ly/functional-css-presentation