Slide 1
Slide 1 text
@simonswiss
A journey into the
opinionated
world of
utility-first CSS
Slide 2
Slide 2 text
@simonswiss
Slide 3
Slide 3 text
@simonswiss
Slide 4
Slide 4 text
@simonswiss
Slide 5
Slide 5 text
@simonswiss
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
“
@simonswiss
- Dick Fosbury
I was told over and over again that I
would never be successful.
Slide 8
Slide 8 text
“
@simonswiss
- Dick Fosbury
They said the technique was simply
not going to work.
Slide 9
Slide 9 text
“
@simonswiss
- Dick Fosbury
All I could do was shrug and say:
“We’ll just have to see”.
Slide 10
Slide 10 text
@simonswiss
CHANGE
People do not like
Slide 11
Slide 11 text
@simonswiss
CONCERNS
Separation of
Slide 12
Slide 12 text
@simonswiss
SEMANTIC
Only use
classnames!
Slide 13
Slide 13 text
index.html
style_A.css
theme_B.css
site_C.css
@simonswiss
Slide 14
Slide 14 text
@simonswiss
Slide 15
Slide 15 text
@simonswiss
Slide 16
Slide 16 text
@simonswiss
pretty
handy!
presentational
classnames
Slide 17
Slide 17 text
@simonswiss
Slide 18
Slide 18 text
@simonswiss
Slide 19
Slide 19 text
@simonswiss
Slide 20
Slide 20 text
@simonswiss
Slide 21
Slide 21 text
@simonswiss
CHANGE
People do not like
Slide 22
Slide 22 text
@simonswiss
Slide 23
Slide 23 text
By Cristiano
Rastelli
Slide 24
Slide 24 text
@simonswiss
Assume you
lack context.
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
@simonswiss
Slide 27
Slide 27 text
@simonswiss
Slide 28
Slide 28 text
@simonswiss
Slide 29
Slide 29 text
@simonswiss
Slide 30
Slide 30 text
@simonswiss
BEM can’t handle
constant BAU and
urgent everything.
Slide 31
Slide 31 text
@simonswiss
CSS becomes hard to
UPDATE
Slide 32
Slide 32 text
@simonswiss
Impossible to
DELETE
Slide 33
Slide 33 text
@simonswiss
WRITE
WRITE
CSS is easy to
WRITE
RITE
RIT
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
Kudos to
this guy!
@simonswiss
Slide 36
Slide 36 text
@simonswiss
Slide 37
Slide 37 text
@simonswiss
Slide 38
Slide 38 text
The moment.
By Adam
Morse
Slide 39
Slide 39 text
“
@simonswiss
– Adam Morse, “CSS and Scalability”
The best way to maintain CSS is to
stop writing CSS.
Slide 40
Slide 40 text
@simonswiss
Slide 41
Slide 41 text
@simonswiss
How do we write
maintainable CSS?
Slide 42
Slide 42 text
@simonswiss
How do we write
maintainable CSS?
Slide 43
Slide 43 text
@simonswiss
How do we stop
writing CSS?
Slide 44
Slide 44 text
@simonswiss
SEMANTIC
Only use
classnames!
Slide 45
Slide 45 text
@simonswiss
Your HTML will change over time.
Slide 46
Slide 46 text
@simonswiss
Your HTML will change over time.
Slide 47
Slide 47 text
@simonswiss
Your HTML will change over time.
Slide 48
Slide 48 text
@simonswiss
Your HTML will change over time.
Slide 49
Slide 49 text
@simonswiss
Your HTML will change over time.
Slide 50
Slide 50 text
Remove
top
padding
@simonswiss
Your HTML will change over time.
Slide 51
Slide 51 text
@simonswiss
Remove
top
padding
Not semantic!
Clever classname..
Slide 52
Slide 52 text
@simonswiss
More changes coming…
Slide 53
Slide 53 text
@simonswiss
Big Hero Title
This is a small headline just to make the hero
look relatively good.
Remove
top
padding
More changes coming…
Slide 54
Slide 54 text
Big Hero Title
This is a small headline just to make the hero
look relatively good.
Remove
top
padding
Ugh…
I wish!
Can’t use that!
Slide 55
Slide 55 text
@simonswiss
Reusable single
property
NOT reusable
classname
Slide 56
Slide 56 text
@simonswiss
Slide 57
Slide 57 text
“
@simonswiss
“Un-semantic” classes
are breaking the web.
Slide 58
Slide 58 text
@simonswiss
Confusion between
semantic HTML and
semantic classes.
Slide 59
Slide 59 text
@simonswiss
By Nicolas
Gallagher
Slide 60
Slide 60 text
@simonswiss
Can we really
decouple
HTML and
CSS?
Slide 61
Slide 61 text
“
@simonswiss
– Adam Wathan, "CSS utility classes and 'separation of concerns'"
I see the relationship
between HTML and CSS as
a dependency direction.
Slide 62
Slide 62 text
“
@simonswiss
– Adam Wathan, "CSS utility classes and 'separation of concerns'"
I see the relationship
between HTML and CSS as
a dependency direction.
A
tw
o-w
a
y
street!
Slide 63
Slide 63 text
HTML
CAN BE
RE-STLYED AT WILL
CSS
CAN BE
RE-USED AT WILL
DECOUPLED!
DECOUPLED!
CSS
IS TIED TO THE HTML AND
NOT RE-USABLE
HTML
IS TIED TO THE CSS AND CANNOT BE
NOT RE-STYLED
NOT DECOUPLED
NOT DECOUPLED
“SEMANTIC” CLASSNAMES PRESENTATIONAL CLASSNAMES
@simonswiss
Slide 64
Slide 64 text
DEPENDS ON
CSS
HTML
DEPENDS ON
CSS
HTML
“SEMANTIC” CLASSNAMES PRESENTATIONAL CLASSNAMES
@simonswiss
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
No content
Slide 67
Slide 67 text
@simonswiss
Speed and simplicity.
Slide 68
Slide 68 text
@simonswiss
You stop writing CSS!
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
@simonswiss
HTML is local scope,
CSS is global scope.
Slide 71
Slide 71 text
@simonswiss
DWYL/
learn-tachyons
Slide 72
Slide 72 text
@simonswiss
Slide 73
Slide 73 text
@simonswiss
WORKFLOW
Ridiculously fast
No, seriously!
Slide 74
Slide 74 text
@simonswiss
Slide 75
Slide 75 text
@simonswiss
bg-dark-blue
pv6
white f1 fw9
mw6
mw7
bl bw3 pl4
b——blue
Slide 76
Slide 76 text
@simonswiss
Slide 77
Slide 77 text
“
@simonswiss
You may as well use
inline styles!
Slide 78
Slide 78 text
@simonswiss
Yeah right.
@simonswiss
Slide 79
Slide 79 text
@simonswiss
What about hover states,
pseudo elements or
media queries?
Slide 80
Slide 80 text
@simonswiss
Slide 81
Slide 81 text
@simonswiss
What about specificity?
Design restrictions?
Slide 82
Slide 82 text
“
@simonswiss
You may as well use
inline styles!
Slide 83
Slide 83 text
@simonswiss
Write custom CSS
only when you
need it.
Slide 84
Slide 84 text
@simonswiss
Stop abstracting
too early!
Slide 85
Slide 85 text
@simonswiss
custom
custom
custom
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Slide 86
Slide 86 text
@simonswiss
BEM
BEM
BEM
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Utilities
Slide 87
Slide 87 text
@simonswiss
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
BEM
Slide 88
Slide 88 text
@simonswiss
SOLD
I am
on Tachyons
Slide 89
Slide 89 text
CHRISTMAS
BREAK
@simonswiss
Slide 90
Slide 90 text
ONE SHOT
This is my
A 2 week window
where BAU stops.
@simonswiss
Slide 91
Slide 91 text
@simonswiss
ZERO
I have technically
experience with
tachyons.
Slide 92
Slide 92 text
@simonswiss
¯\_(ツ)_/¯
Slide 93
Slide 93 text
@simonswiss
Slide 94
Slide 94 text
@simonswiss
Slide 95
Slide 95 text
@simonswiss
Slide 96
Slide 96 text
@simonswiss
Slide 97
Slide 97 text
@simonswiss
Slide 98
Slide 98 text
@simonswiss
Slide 99
Slide 99 text
@simonswiss
Slide 100
Slide 100 text
What is
the plan?
Slide 101
Slide 101 text
@simonswiss
Slide 102
Slide 102 text
Merge to
production
upon
return.
Slide 103
Slide 103 text
@simonswiss
SUGAR
Stage 1: Tachyons as
on top.
Slide 104
Slide 104 text
@simonswiss
At the
very end
Slide 105
Slide 105 text
@simonswiss
Slide 106
Slide 106 text
@simonswiss
Slide 107
Slide 107 text
@simonswiss
Slide 108
Slide 108 text
@simonswiss
Slide 109
Slide 109 text
@simonswiss
Slide 110
Slide 110 text
@simonswiss
Slide 111
Slide 111 text
@simonswiss
Bye!
Slide 112
Slide 112 text
@simonswiss
BLOWN
My mind is
Slide 113
Slide 113 text
@simonswiss
UTILITY
FIRST
versus
UTILITY
LAST !important;
Slide 114
Slide 114 text
@simonswiss
ALL OUT
Stage 2: going
Slide 115
Slide 115 text
@simonswiss
You’re on your
own, buddy!
Slide 116
Slide 116 text
@simonswiss
git checkout -b
tachyons-yolo
Slide 117
Slide 117 text
@simonswiss
gulp
Slide 118
Slide 118 text
@simonswiss
Slide 119
Slide 119 text
@simonswiss
Slide 120
Slide 120 text
@simonswiss
Slide 121
Slide 121 text
@simonswiss
Slide 122
Slide 122 text
@simonswiss
All grids done in a
couple of hours.
Slide 123
Slide 123 text
@simonswiss
Copy & paste mess
Slide 124
Slide 124 text
@simonswiss
Slide 125
Slide 125 text
@simonswiss
Slide 126
Slide 126 text
@simonswiss
Master layout
template
Slide 127
Slide 127 text
@simonswiss
Slide 128
Slide 128 text
@simonswiss
Aside: you can do
the same in CSS!
Slide 129
Slide 129 text
No content
Slide 130
Slide 130 text
No content
Slide 131
Slide 131 text
BEM within
design rules!
Slide 132
Slide 132 text
@simonswiss
Well, this is one pretty
cool setup!
Slide 133
Slide 133 text
@simonswiss
Slide 134
Slide 134 text
@simonswiss
10 DAYS
later…
Slide 135
Slide 135 text
@simonswiss
Slide 136
Slide 136 text
@simonswiss
THE VERDICT
Immediate impressions,
long term observations.
Slide 137
Slide 137 text
Remove as
much CSS
tech debt
as possible.
Slide 138
Slide 138 text
@simonswiss
I have literally
removed
all of it.
Slide 139
Slide 139 text
@simonswiss
Onboarding team is
very quick.
Slide 140
Slide 140 text
@simonswiss
CSS anxiety: gone!
Slide 141
Slide 141 text
@simonswiss
BAU doesn’t worry
me anymore.
Slide 142
Slide 142 text
@simonswiss
You really stop
writing CSS.
Slide 143
Slide 143 text
@simonswiss
Slide 144
Slide 144 text
@simonswiss
Slide 145
Slide 145 text
@simonswiss
Can things somehow get
a bit messy?
Slide 146
Slide 146 text
@simonswiss
YES!
Slide 147
Slide 147 text
@simonswiss
Do you feel like you
slowly lose control?
Slide 148
Slide 148 text
@simonswiss
NO!
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
“
@simonswiss
– Nicolas Gallagher, “About HTML semantics and
front-end architecture”
To reduce the amount of writing and editing
CSS, you must accept to spend more time
changing HTML classes on elements to
change their styles.
Slide 151
Slide 151 text
“
@simonswiss
– Nicolas Gallagher, “About HTML semantics and
front-end architecture”
This turns out to be fairly practical. Anyone
can rearrange pre-built “lego blocks”, but
no one can perform CSS-alchemy.
Slide 152
Slide 152 text
@simonswiss
Would I do it again?
Slide 153
Slide 153 text
O
u
u
h
yea
h!!
Slide 154
Slide 154 text
@simonswiss
Hybrid design/dev
workflow.
Slide 155
Slide 155 text
@simonswiss
Slide 156
Slide 156 text
@simonswiss
Slide 157
Slide 157 text
@simonswiss
Slide 158
Slide 158 text
@simonswiss
Slide 159
Slide 159 text
@simonswiss
OMG OMG!
Slide 160
Slide 160 text
@simonswiss
Slide 161
Slide 161 text
@simonswiss
Tachyons too!
Slide 162
Slide 162 text
@simonswiss
Tachyons
Tailwind
Utility class
Composition
Experiment: best
rendering engine perf
Product: easy
to customise
'
Slide 163
Slide 163 text
20/10/1968
Slide 164
Slide 164 text
@simonswiss
Slide 165
Slide 165 text
@simonswiss
Slide 166
Slide 166 text
@simonswiss
Thank
you!
Keep the conversation going..
Slide 167
Slide 167 text
@simonswiss
Articles & websites
Let There Be Peace On CSS
CSS and Scalability
About HTML Semantics and Front End
Architecture
CSS Utility Classes and "Separation of
Concerns"
Naming CSS Stuff Is Really Hard
DWYL/Learn Tachyons
CSS Zen Garden
Libraries & frameworks
Tachyons
Tailwind CSS
Flexbox Grid
Further reading
The Case for Atomic CSS
How is Tachyons Different From Inline
Styles?
Don't Write CSS, Configure it With
Tailwind