Utility-First CSS: Build a clean Component based system

You may be familiar with the time when the CSS of your application reaches the point when you start adding some weird classes. Save you some trouble and start using an utility-first approach.

////////////////////////////////////////////////////////////////////////

Thanks for ❤️
– @elifitch for the initial inspiration;
– @simonswiss for the perfect way to showcase all stakeholder's requests

Transcript

1. Yeah, that's a big title.
   

   View Slide

2. Hello
   

   View Slide

3. So, CSS…
   

   View Slide

4. View Slide

5. Can be hard, right?
   

   View Slide

6. ✋ Do you "Front-End"?
   

   View Slide

7. Do you write CSS? ✍
   

   View Slide

8. Still remember your
   last CSS nightmare?
   

   View Slide

9. I'm Caneco
   Full-Stack Developer @MEDICARE
   

   View Slide

10. I'm Caneco
    .PHP .JS .HTML .CSS .JSON .SQL
    .GIT .BASH .SVG .PNG .PSD .AI
    

    View Slide

11. Yeah, that's a big title.
    

    View Slide

12. Once upon a time…
    

    View Slide

13. Before CSS was cool
    

    View Slide

14. ¸
    
    Lorem Ipsum
    !!
    1.
    2.
    3.
    

    View Slide

15. And then in 1996
    

    View Slide

16. ¸
    p {
    font-size: 16px;
    color: red;
    }
    1.
    2.
    3.
    4.
    

    View Slide

17. Finally it was easy to style
    

    View Slide

18. Browsers started to adopt CSS
    

    View Slide

19. Even Internet Explorer
    had 99% CCS1 support in 2000
    

    View Slide

20. Even Internet Explorer
    had 99% CCS1 support in 2000
    for the Macintosh
    https://en.wikipedia.org/wiki/Cascading_Style_Sheets
    

    View Slide

21. CSS Zen Garden (
    

    View Slide

22. THEME-2.CSS
    INDEX.HTML
    THEME-3.CSS
    THEME-1.CSS
    

    View Slide

23. Tradicional CSS
    

    View Slide

24. 
    
    
    !
    !!...!
    !!...!
    !
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    

    View Slide

25. ¸
    #author .picture {!!...}
    #author .picture .rounded {!!...}
    #author .name {!!...}
    #author .description {!!...}
    #author ul > li b.item {!!...}
    1.
    2.
    3.
    4.
    5.
    

    View Slide

26. Introducing BEM

    block!__element!--modifier
    

    View Slide

27. ¸
    #author .picture {!!...}
    #author .picture .rounded {!!...}
    #author .name {!!...}
    #author .description {!!...}
    #author ul > li b.item {!!...}
    1.
    2.
    3.
    4.
    5.
    

    View Slide

28. .author!__picture {!!...}
    .author!__picture!--rounded {!!...}
    .author!__name {!!...}
    .author!__description {!!...}
    .author!__item {!!...}
    1.
    2.
    3.
    4.
    5.
    

    View Slide

29. 
    
    !
    !!...!
    !!...!
    !
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    

    View Slide

30. Author Block
    

    View Slide

31. A wild Stakeholder appears
    DISCLAIMER: NOTHING AGAINS ANY STAKEHOLDER !important
    

    View Slide

32. Author Block
    NEW Post Block
    

    View Slide

33. How to stay "Semantic"?
    

    View Slide

34. ¸
    
    
    !
    !!...!
    !!...!
    !
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    

    View Slide

35. ¸
    
    
    !!...!
    !!...!
    !
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    

    View Slide

36. View Slide

37. A wild Stakeholder appears
    A wild Stakeholder appears
    

    View Slide

38. Can you pull
    that CTA
    section up?
    

    View Slide

39. Erm… sure
    

    View Slide

40. What about
    that space?
    

    View Slide

41. ¸
    .intro!--no-padding-bottom {
    padding-bottom: 0;
    }
    1.
    2.
    3.
    

    View Slide

42. View Slide

43. A wild Stakeholder appears
    A wild Stakeholder appears
    A wild Stakeholder appears
    

    View Slide

44. Can you duplicate
    the page?
    But the hero can't
    have a background.
    

    View Slide

45. What about
    that space?
    

    View Slide

46. ¸
    .hero!--no-background {
    background-image: none;
    }
    .hero!__title!--dark {
    color: '#2f365f';
    }
    .intro!--no-padding-bottom {
    padding-bottom: 0;
    }
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    

    View Slide

47. Update CSS is hard
    

    View Slide

48. Delete CSS is harder
    

    View Slide

49. CSS is at least
    unpredictable
    

    View Slide

50. View Slide

51. .author!__picture {!!...}
    .author!__picture!--rounded {!!...}
    .author!__name {!!...}
    .author!__description {!!...}
    .block!__A!--no-padding {!!...}
    .block!__B!--no-margin {!!...}
    .block!__C!--no-margin-top {!!...}
    .block!__D!--tet-left {!!...}
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    

    View Slide

52. !important
    

    View Slide

53. .author!__picture {!!...}
    .author!__picture!--rounded {!!...}
    .author!__name {!!...}
    .author!__description {!!...}
    .block!__A!--no-padding {!!...}
    .block!__B!--no-margin {!!...}
    .block!__C!--no-margin-top {!!...}
    .block!__D!--text-left {!!...}
    .block!__E!--again { screw: 'it' !important }
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    

    View Slide

54. Piling up CSS
    becomes much easier
    

    View Slide

55. Time Time Time Time
    Traditional CSS
    

    View Slide

56. BEM doesn't work
    (well) with ASAP requests
    

    View Slide

57. Not to mention
    >_ npm run build:css
    

    View Slide

58. But, let's take a step back…
    

    View Slide

59. .author!__picture {!!...}
    .author!__picture!--rounded {!!...}
    .author!__name {!!...}
    .author!__description {!!...}
    .block!__A!--no-padding {!!...}
    .block!__B!--no-margin {!!...}
    .block!__C!--no-margin-top {!!...}
    .block!__D!--text-left {!!...}
    .block!__E!--again { screw: 'it' !important }
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    

    View Slide

60. .author!__picture {!!...}
    .author!__picture!--rounded {!!...}
    .author!__name {!!...}
    .author!__description {!!...}
    .block!__A!--no-padding {!!...}
    .block!__B!--no-margin {!!...}
    .block!__C!--no-margin-top {!!...}
    .block!__D!--text-left {!!...}
    .block!__E!--again { screw: 'it' !important }
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    

    View Slide

61. Isn't that utility classes?
    

    View Slide

62. .author!__picture {!!...}
    .author!__picture!--rounded {!!...}
    .author!__name {!!...}
    .author!__description {!!...}
    .block!__A!--no-padding {!!...}
    .block!__B!--no-margin {!!...}
    .block!__C!--no-margin-top {!!...}
    .block!__D!--text-left {!!...}
    .block!__E!--again { screw: 'it' !important }
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    

    View Slide

63. View Slide

64. It's like sprinkling sugar
    

    View Slide

65. View Slide

66. What if we go all-in?
    

    View Slide

67. ¸ !!...!
    1.
    

    View Slide

68. ¸
    !!...!
    1.
    2.
    3.
    

    View Slide

69. It's like LEGO
    LEGO
    

    View Slide

70. …or an API for design
    

    View Slide

71. Presenting utility-first CSS

    text-black text-5xl font-sans text-center
    

    View Slide

72. There's many solutions
    

    View Slide

73. Atomic CSS 

    Fl(start) W(300px) Ta(c) P(10px) C(#0280ae)
    

    View Slide

74. Tachyons CSS 

    br-100 ba h3 w3 dib
    

    View Slide

75. Tailwind CSS 

    bg-blue text-sm border-b-2 uppercase px-4
    

    View Slide

76. Better just use inline styles…
    

    View Slide

77. ¸
    !!...!
    1.
    2.
    3.
    4.
    5.
    6.
    

    View Slide

78. How can you handle?
    @media @keyframes !::pseudo !--prefix
    

    View Slide

79. You gain a design system
    bg-blue text-grey text-xl
    

    View Slide

80. But most !important…
    You have the rendering speed
    

    View Slide

81. UI elements
    without writing CSS
    

    View Slide

82. (NEW) UI elements
    without writing (NEW) CSS
    

    View Slide

83. Dependency shift
    

    View Slide

84. TW.CSS
    HOME.HTML
    APP.HTML
    LEAD.HTML
    

    View Slide

85. Also ship once
    and you're good ⛴
    

    View Slide

86. Time Time Time Time
    Traditional CSS Utilities CSS
    

    View Slide

87. Gotta be honest…
    

    View Slide

88. It can be a bit verbose
    

    View Slide

89. ¸
    
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    

    View Slide

90. View Slide

91. How to abstract/simplify?
    

    View Slide

92. Using CSS
    

    View Slide

93. ¸
    .btn {
    @apply rounded px-4 py-3
    }
    !!!
    !
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    

    View Slide

94. Using PHP
    

    View Slide

95. ¸
    
    !!!
    !1.
    2.
    3.
    4.
    5.
    

    View Slide

96. Using JavaScript
    

    View Slide

97. ¸
    !// NavLink.vue
    
    

    View Slide

98. Designers Developers
    

    View Slide

99. Designers & Developers
    

    View Slide

100. And for the last year
     

     View Slide

101. 1. Become a lot faster
     

     View Slide

102. You don't need to rely
     on any "Bootstrap"
     

     View Slide

103. 2. Less fear of changes
     

     View Slide

104. Even update the CSS
     framework is simpler
     

     View Slide

105. 3. Updating projects it's easier
     

     View Slide

106. Adding a new UI element
     to 6 month project
     

     View Slide

107. For me it's a no-brainer
     

     View Slide

108. Is this for you?
     

     View Slide

109. Thank you
     

     View Slide

110. View Slide