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.
2. Hello
3. So, CSS…
5. Can be hard, right?
6. ✋ Do you "Front-End"?
7. Do you write CSS? ✍
8. Still remember your last CSS nightmare?
9. I'm Caneco Full-Stack Developer @MEDICARE
10. I'm Caneco .PHP .JS .HTML .CSS .JSON .SQL .GIT .BASH .SVG .PNG .PSD .AI
11. Yeah, that's a big title.
12. Once upon a time…
13. Before CSS was cool
14. ¸ <P><FONT SIZE="16" COLOR="RED"> Lorem Ipsum !</FONT>!</P> 1. 2. 3.
15. And then in 1996
16. ¸ p { font-size: 16px; color: red; } 1. 2. 3. 4.
17. Finally it was easy to style
18. Browsers started to adopt CSS
19. Even Internet Explorer had 99% CCS1 support in 2000
20. Even Internet Explorer had 99% CCS1 support in 2000 for the Macintosh https://en.wikipedia.org/wiki/Cascading_Style_Sheets
21. CSS Zen Garden (
22. THEME-2.CSS INDEX.HTML THEME-3.CSS THEME-1.CSS
23. Tradicional CSS
24. <div id="author"> <div class="picture"> <img class="rounded" src="!!..."!/> !</div> <div class="name">!!...!</div> <div class="description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
25. ¸ #author .picture {!!...} #author .picture .rounded {!!...} #author .name {!!...} #author .description {!!...} #author ul > li b.item {!!...} 1. 2. 3. 4. 5.
26. Introducing BEM
 block!__element!--modifier
27. ¸ #author .picture {!!...} #author .picture .rounded {!!...} #author .name {!!...} #author .description {!!...} #author ul > li b.item {!!...} 1. 2. 3. 4. 5.
28. .author!__picture {!!...} .author!__picture!--rounded {!!...} .author!__name {!!...} .author!__description {!!...} .author!__item {!!...} 1. 2. 3. 4. 5.
29. <div class="author"> <div class="author!__picture"> <img class="author!__picture!--rounded" src !</div> <div class="author!__name">!!...!</div> <div class="author!__description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
30. Author Block
31. A wild Stakeholder appears DISCLAIMER: NOTHING AGAINS ANY STAKEHOLDER !important
32. Author Block NEW Post Block
33. How to stay "Semantic"?
34. ¸ <div class="author"> <div class="author!__picture"> <img class="author!__picture!--rounded" src !</div> <div class="author!__name">!!...!</div> <div class="author!__description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
35. ¸ <div class="card"> <div class="card!__picture"> <img class="card!__picture!--rounded" src=" !</div> <div class="card!__name">!!...!</div> <div class="card!__description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
37. A wild Stakeholder appears A wild Stakeholder appears
38. Can you pull that CTA section up?
39. Erm… sure
40. What about that space?
41. ¸ .intro!--no-padding-bottom { padding-bottom: 0; } 1. 2. 3.
43. A wild Stakeholder appears A wild Stakeholder appears A wild Stakeholder appears
44. Can you duplicate the page? But the hero can't have a background.
45. What about that space?
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.
47. Update CSS is hard
48. Delete CSS is harder
49. CSS is at least unpredictable
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.
52. !important
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.
54. Piling up CSS becomes much easier
55. Time Time Time Time Traditional CSS
56. BEM doesn't work (well) with ASAP requests
57. Not to mention >_ npm run build:css
58. But, let's take a step back…
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.
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.
61. Isn't that utility classes?
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.
64. It's like sprinkling sugar
66. What if we go all-in?
67. ¸ <button class="hero!__button">!!...!</button> 1.
68. ¸ <button class=" bg-purple text-white rounded px-4 py-3 ">!!...!</button> 1. 2. 3.
69. It's like LEGO LEGO
70. …or an API for design
71. Presenting utility-first CSS
 text-black text-5xl font-sans text-center
72. There's many solutions
73. Atomic CSS 
 Fl(start) W(300px) Ta(c) P(10px) C(#0280ae)
74. Tachyons CSS 
 br-100 ba h3 w3 dib
75. Tailwind CSS 
 bg-blue text-sm border-b-2 uppercase px-4
76. Better just use inline styles…
77. ¸ <button style=" background-color: #9561e2; color: white; border-radius: 10px; !/* autoprefix? !*/ padding: 3px 4px; ">!!...!</button> 1. 2. 3. 4. 5. 6.
78. How can you handle? @media @keyframes !::pseudo !--prefix
79. You gain a design system bg-blue text-grey text-xl
80. But most !important… You have the rendering speed
81. UI elements without writing CSS
82. (NEW) UI elements without writing (NEW) CSS
83. Dependency shift
84. TW.CSS HOME.HTML APP.HTML LEAD.HTML
85. Also ship once and you're good ⛴
86. Time Time Time Time Traditional CSS Utilities CSS
87. Gotta be honest…
88. It can be a bit verbose
89. ¸ <nav class="flex justify-between items-center <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <nav> 1. 2. 3. 4. 5. 6. 7.
91. How to abstract/simplify?
92. Using CSS
93. ¸ .btn { @apply rounded px-4 py-3 } !!!<!-- then in HTML !!--> <a class="btn bg-blue text-white">!</a> 1. 2. 3. 4. 5. 6. 7.
94. Using PHP
95. ¸ <?php $btn = 'rounded px-4 py-3' ?> !!!<!-- then in HTML !!--> <a class="<!?= $btn ?> bg-blue text-white">!</b 1. 2. 3. 4. 5.
96. Using JavaScript
97. ¸ !// NavLink.vue <template> <a class="bg-blue text-white rounded px-4 p <slot>!</slot> !</a> !</template> !!!<!-- then in HTML !!--> <NavLink>About us!</NavLink> 1. 2. 3. 4. 5. 6. 7. 8. 9.
98. Designers Developers
99. Designers & Developers
100. And for the last year
101. 1. Become a lot faster
102. You don't need to rely on any "Bootstrap"
103. 2. Less fear of changes
104. Even update the CSS framework is simpler
105. 3. Updating projects it's easier
106. Adding a new UI element to 6 month project
107. For me it's a no-brainer
108. Is this for you?
109. Thank you