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
Search
Daniel Fosco
May 23, 2018
Design
2
70
Utility CSS
A small presentation highlighting the advantages (and pitfalls) of utility-based CSS
Daniel Fosco
May 23, 2018
Tweet
Share
More Decks by Daniel Fosco
See All by Daniel Fosco
Let's talk about design portfolios
dfosco
3
110
Utility CSS 2019
dfosco
0
81
UX Design – What, Why, How
dfosco
0
170
Portfolio Talk
dfosco
0
110
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
#Dubois Challenge 2025: Economics
ajstarks
0
130
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
1
190
DC Style Redesign
mcduckyart
0
130
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
ポートフォリオ_webデザイナー
nami_webdesigner
0
100
オープンデータを利用して色々なものを作った話
hjmkth
1
120
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
プロジェクト内でデザイナーができること 日経電子版アプリ機能開発「For You」#nikkei_tech_talk
nikkei_engineer_recruiting
8
4k
minpaku-community-scrum-patterns
norinity1103
1
120
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
290
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
990
Cyber Heart Online Book
hjnasby
0
130
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Designing Experiences People Love
moore
142
24k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Code Reviewing Like a Champion
maltzj
524
40k
Documentation Writing (for coders)
carmenintech
72
4.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Balancing Empowerment & Direction
lara
1
430
Statistics for Hackers
jakevdp
799
220k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Transcript
UTILITY-BASED CSS
None
None
None
“Just use BEM”
THE PROBLEM WITH CONVENTION IS THAT IT'S USUALLY OPTIONAL
None
A BUNCH OF SMALL PROPERTIES THAT JUST DO A SINGLE
THING
None
None
None
A UTILITY CLASS FOR EVERYTHING
.padding-top-smallest .padding-top-smaller .padding-top-small .padding-top-medium .flex .flex-column .flex-row .bg-primary .bg-primary-light .bg-primary-lighter
.bg-primary-lightest
None
None
None
None
GOOD DEFAULTS SENSIBLE SCALE
None
None
None
YOU DON'T WRITE CSS YOU JUST USE CSS (MOSTLY)
THE GOOD OPTIONS ARE YOUR ONLY OPTIONS (MOSTLY)
A CONSTRAINED SET OF TOOLS INSTEAD OF CONVENTIONS (MOSTLY)
DEMO
THE CLEAR DOWNSIDE... IS THAT YOU HAVE TO GET USED
TO IT
STYLES DON'T OVERWRITE EACH OTHER NO SIDE-EFFECTS
None
YOU DON'T NEED TO KEEP TRACK OF YOUR CSS
None
PERFORMANCE
None
184
123
.db { display: block } .fl { float: left }
65% REDUCTION
BFFS WITH BUI
REFACTORING CSS HOLDS VERY LITTLE BUSINESS VALUE
1. Get feedback and align with IQ 2. Refine library
to only what we need 3. Document and make it accessible to designers 4. Merge with BUI (what makes sense)
THANKS GO/ATOMIC-CSS-LINKS