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 2019
Daniel Fosco
March 18, 2019
Design
0
6
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
dfosco
3
70
dfosco
0
37
dfosco
0
55
dfosco
2
50
dfosco
1
83
dfosco
1
88
Other Decks in Design
See All in Design
takumasaito
1
850
shulamitsimon
0
650
jonoda
1
710
duncanstephen
0
470
ajstarks
1
1.1k
samandthezoo
0
150
vincentwu
PRO
0
120
ytleoo
1
290
andpad
0
380
danielblake
0
210
uxinlux
1
8.6k
mollysart
0
190
Featured
See All Featured
marcelosomers
221
15k
colly
66
3k
cromwellryan
104
6.3k
62gerente
586
200k
sachag
446
36k
keithpitt
402
20k
philnash
10
680
hursman
107
9.3k
vanstee
118
4.9k
malarkey
392
61k
productmarketing
6
780
shpigford
370
42k
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