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

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.

C139e079862b7cb74d705529bbb3ddbc?s=128

Simon Vrachliotis

September 27, 2018
Tweet

Transcript

  1. @simonswiss A journey into the opinionated world of utility-first CSS

  2. @simonswiss

  3. @simonswiss

  4. @simonswiss

  5. @simonswiss

  6. None
  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.

  25. None
  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

  34. None
  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
  65. None
  66. None
  67. @simonswiss Speed and simplicity.

  68. @simonswiss You stop writing CSS!

  69. None
  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!

  129. None
  130. None
  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!

  149. None
  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