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
   
   
   

   View Slide

2. @simonswiss
   

   View Slide

3. @simonswiss
   

   View Slide

4. @simonswiss
   

   View Slide

5. @simonswiss
   

   View Slide

6. View Slide

7. “
   @simonswiss
   - Dick Fosbury
   I was told over and over again that I
   would never be successful.
   

   View Slide

8. “
   @simonswiss
   - Dick Fosbury
   They said the technique was simply
   not going to work.
   

   View Slide

9. “
   @simonswiss
   - Dick Fosbury
   All I could do was shrug and say:
   “We’ll just have to see”.
   

   View Slide

10. @simonswiss
    CHANGE
    People do not like
    

    View Slide

11. @simonswiss
    CONCERNS
    Separation of
    

    View Slide

12. @simonswiss
    SEMANTIC
    Only use
    classnames!
    

    View Slide

13. index.html
    style_A.css
    theme_B.css
    site_C.css
    @simonswiss
    

    View Slide

14. @simonswiss
    

    View Slide

15. @simonswiss
    

    View Slide

16. @simonswiss
    pretty
    handy!
    presentational
    classnames
    

    View Slide

17. @simonswiss
    

    View Slide

18. @simonswiss
    

    View Slide

19. @simonswiss
    

    View Slide

20. @simonswiss
    

    View Slide

21. @simonswiss
    CHANGE
    People do not like
    

    View Slide

22. @simonswiss
    

    View Slide

23. By Cristiano
    Rastelli
    

    View Slide

24. @simonswiss
    Assume you
    lack context.
    

    View Slide

25. View Slide

26. @simonswiss
    

    View Slide

27. @simonswiss
    

    View Slide

28. @simonswiss
    

    View Slide

29. @simonswiss
    

    View Slide

30. @simonswiss
    BEM can’t handle
    constant BAU and
    urgent everything.
    

    View Slide

31. @simonswiss
    CSS becomes hard to
    UPDATE
    

    View Slide

32. @simonswiss
    Impossible to
    DELETE
    

    View Slide

33. @simonswiss
    WRITE
    WRITE
    CSS is easy to
    WRITE
    RITE
    RIT
    

    View Slide

34. View Slide

35. Kudos to
    this guy!
    @simonswiss
    

    View Slide

36. @simonswiss
    

    View Slide

37. @simonswiss
    

    View Slide

38. The moment.
    By Adam
    Morse
    

    View Slide

39. “
    @simonswiss
    – Adam Morse, “CSS and Scalability”
    The best way to maintain CSS is to
    stop writing CSS.
    

    View Slide

40. @simonswiss
    

    View Slide

41. @simonswiss
    How do we write
    maintainable CSS?
    

    View Slide

42. @simonswiss
    How do we write
    maintainable CSS?
    

    View Slide

43. @simonswiss
    How do we stop
    writing CSS?
    

    View Slide

44. @simonswiss
    SEMANTIC
    Only use
    classnames!
    

    View Slide

45. @simonswiss
    Your HTML will change over time.
    

    View Slide

46. @simonswiss
    Your HTML will change over time.
    

    View Slide

47. @simonswiss
    Your HTML will change over time.
    

    View Slide

48. @simonswiss
    Your HTML will change over time.
    

    View Slide

49. @simonswiss
    Your HTML will change over time.
    

    View Slide

50. Remove
    top
    padding
    @simonswiss
    Your HTML will change over time.
    

    View Slide

51. @simonswiss
    Remove
    top
    padding
    Not semantic!
    Clever classname..
    

    View Slide

52. @simonswiss
    More changes coming…
    

    View Slide

53. @simonswiss
    Big Hero Title
    This is a small headline just to make the hero
    look relatively good.
    Remove
    top
    padding
    More changes coming…
    

    View Slide

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!
    

    View Slide

55. @simonswiss
    Reusable single
    property
    NOT reusable
    classname
    

    View Slide

56. @simonswiss
    

    View Slide

57. “
    @simonswiss
    “Un-semantic” classes
    are breaking the web.
    

    View Slide

58. @simonswiss
    Confusion between
    semantic HTML and
    semantic classes.
    

    View Slide

59. @simonswiss
    By Nicolas
    Gallagher
    

    View Slide

60. @simonswiss
    Can we really
    decouple
    HTML and
    CSS?
    

    View Slide

61. “
    @simonswiss
    – Adam Wathan, "CSS utility classes and 'separation of concerns'"
    I see the relationship
    between HTML and CSS as
    a dependency direction.
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

64. DEPENDS ON
    CSS
    HTML
    DEPENDS ON
    CSS
    HTML
    “SEMANTIC” CLASSNAMES PRESENTATIONAL CLASSNAMES
    @simonswiss
    

    View Slide

65. View Slide

66. View Slide

67. @simonswiss
    Speed and simplicity.
    

    View Slide

68. @simonswiss
    You stop writing CSS!
    

    View Slide

69. View Slide

70. @simonswiss
    HTML is local scope,
    CSS is global scope.
    

    View Slide

71. @simonswiss
    DWYL/
    learn-tachyons
    

    View Slide

72. @simonswiss
    

    View Slide

73. @simonswiss
    WORKFLOW
    Ridiculously fast
    No, seriously!
    

    View Slide

74. @simonswiss
    

    View Slide

75. @simonswiss
    bg-dark-blue
    pv6
    white f1 fw9
    mw6
    mw7
    bl bw3 pl4
    b——blue
    

    View Slide

76. @simonswiss
    

    View Slide

77. “
    @simonswiss
    You may as well use
    inline styles!
    

    View Slide

78. @simonswiss
    Yeah right.
    @simonswiss
    

    View Slide

79. @simonswiss
    What about hover states,
    pseudo elements or
    media queries?
    

    View Slide

80. @simonswiss
    

    View Slide

81. @simonswiss
    What about specificity?
    Design restrictions?
    

    View Slide

82. “
    @simonswiss
    You may as well use
    inline styles!
    

    View Slide

83. @simonswiss
    Write custom CSS
    only when you
    need it.
    

    View Slide

84. @simonswiss
    Stop abstracting
    too early!
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

88. @simonswiss
    SOLD
    I am
    on Tachyons
    

    View Slide

89. CHRISTMAS
    BREAK
    @simonswiss
    

    View Slide

90. ONE SHOT
    This is my
    A 2 week window
    where BAU stops.
    @simonswiss
    

    View Slide

91. @simonswiss
    ZERO
    I have technically
    experience with
    tachyons.
    

    View Slide

92. @simonswiss
    ¯\_(ツ)_/¯
    

    View Slide

93. @simonswiss
    

    View Slide

94. @simonswiss
    

    View Slide

95. @simonswiss
    

    View Slide

96. @simonswiss
    

    View Slide

97. @simonswiss
    

    View Slide

98. @simonswiss
    

    View Slide

99. @simonswiss
    

    View Slide

100. What is
     the plan?
     

     View Slide

101. @simonswiss
     

     View Slide

102. Merge to
     production
     upon
     return.
     

     View Slide

103. @simonswiss
     SUGAR
     Stage 1: Tachyons as
     on top.
     

     View Slide

104. @simonswiss
     At the
     very end
     

     View Slide

105. @simonswiss
     

     View Slide

106. @simonswiss
     

     View Slide

107. @simonswiss
     

     View Slide

108. @simonswiss
     

     View Slide

109. @simonswiss
     

     View Slide

110. @simonswiss
     

     View Slide

111. @simonswiss
     Bye!
     

     View Slide

112. @simonswiss
     BLOWN
     My mind is
     

     View Slide

113. @simonswiss
     UTILITY
     FIRST
     versus
     UTILITY
     LAST !important;
     

     View Slide

114. @simonswiss
     ALL OUT
     Stage 2: going
     

     View Slide

115. @simonswiss
     You’re on your
     own, buddy!
     

     View Slide

116. @simonswiss
     git checkout -b
     tachyons-yolo
     

     View Slide

117. @simonswiss
     gulp
     

     View Slide

118. @simonswiss
     

     View Slide

119. @simonswiss
     

     View Slide

120. @simonswiss
     

     View Slide

121. @simonswiss
     

     View Slide

122. @simonswiss
     All grids done in a
     couple of hours.
     

     View Slide

123. @simonswiss
     Copy & paste mess
     
     

     View Slide

124. @simonswiss
     

     View Slide

125. @simonswiss
     

     View Slide

126. @simonswiss
     Master layout
     template
     

     View Slide

127. @simonswiss
     

     View Slide

128. @simonswiss
     Aside: you can do
     the same in CSS!
     

     View Slide

129. View Slide

130. View Slide

131. BEM within
     design rules!
     
     

     View Slide

132. @simonswiss
     Well, this is one pretty
     cool setup!
     

     View Slide

133. @simonswiss
     

     View Slide

134. @simonswiss
     10 DAYS
     later…
     

     View Slide

135. @simonswiss
     

     View Slide

136. @simonswiss
     THE VERDICT
     Immediate impressions,
     long term observations.
     

     View Slide

137. Remove as
     much CSS
     tech debt
     as possible.
     

     View Slide

138. @simonswiss
     I have literally
     removed
     all of it.
     

     View Slide

139. @simonswiss
     Onboarding team is
     very quick.
     

     View Slide

140. @simonswiss
     CSS anxiety: gone!
     

     View Slide

141. @simonswiss
     BAU doesn’t worry
     me anymore.
     

     View Slide

142. @simonswiss
     You really stop
     writing CSS.
     

     View Slide

143. @simonswiss
     

     View Slide

144. @simonswiss
     

     View Slide

145. @simonswiss
     Can things somehow get
     a bit messy?
     

     View Slide

146. @simonswiss
     YES!
     

     View Slide

147. @simonswiss
     Do you feel like you
     slowly lose control?
     

     View Slide

148. @simonswiss
     NO!
     

     View Slide

149. View Slide

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.
     

     View Slide

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.
     

     View Slide

152. @simonswiss
     Would I do it again?
     

     View Slide

153. O
     u
     u
     h
     yea
     h!!
     

     View Slide

154. @simonswiss
     Hybrid design/dev
     workflow.
     

     View Slide

155. @simonswiss
     

     View Slide

156. @simonswiss
     

     View Slide

157. @simonswiss
     

     View Slide

158. @simonswiss
     

     View Slide

159. @simonswiss
     OMG OMG!
     

     View Slide

160. @simonswiss
     

     View Slide

161. @simonswiss
     Tachyons too!
     

     View Slide

162. @simonswiss
     Tachyons
     Tailwind
     Utility class
     Composition
     Experiment: best
     rendering engine perf
     Product: easy
     to customise
     '
     
     

     View Slide

163. 20/10/1968
     

     View Slide

164. @simonswiss
     

     View Slide

165. @simonswiss
     

     View Slide

166. @simonswiss
     Thank
     you!
     Keep the conversation going..
     

     View Slide

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
     

     View Slide