A Real-Life Journey into the Opinionated World of "Utility-First" CSS

Everyone loves writing CSS. It's fun! Maintaining a CSS codebase at scale is another story. A few tight deadlines and quick shortcuts, and whoops - you find yourself in the dreaded “append only stylesheet” situation.

Utility classes to the rescue! Keep an open mind, and let's embark on a real-life journey into the controversial, emotional and highly opinionated World of “utility-first” CSS.

Transcript

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