Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Utility CSS
Daniel Fosco
May 23, 2018
Design
2
50
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
dfosco
3
70
dfosco
0
7
dfosco
0
37
dfosco
0
55
dfosco
1
83
dfosco
1
88
Other Decks in Design
See All in Design
kignato1
0
160
mollysart
0
200
benace75
0
390
theorangebird01
0
100
mollysart
0
350
kignato1
0
170
ajstarks
1
1.1k
irenehuangboards
0
140
kignato1
0
170
artyx21
1
220
twashington16
PRO
0
330
mollysart
0
200
Featured
See All Featured
shpigford
166
19k
destraynor
222
47k
philnash
10
680
lauravandoore
12
1.7k
trishagee
24
3.1k
moore
125
21k
bkeepers
PRO
54
4.3k
nonsquared
81
3.4k
yeseniaperezcruz
302
31k
morganepeng
95
14k
shlominoach
176
7.6k
keathley
20
770
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