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
73
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
83
UX Design – What, Why, How
dfosco
0
180
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
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.7k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
420
DESIGNEAST 2025 A-3
_kotobuki_
0
100
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
1年目デザイナーが実践する、チーム貢献のための2つのアプローチ
kinomidesign
0
120
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
320
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
420
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
920
Liquid GlassとApp Intents
touyou
0
420
7 Core Values of Round-L
wired888
0
2.2k
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
630
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Statistics for Hackers
jakevdp
799
220k
Agile that works and the tools we love
rasmusluckow
331
21k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Building Adaptive Systems
keathley
44
2.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Fireside Chat
paigeccino
40
3.7k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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