In Defense of Utility-First CSS

Writing CSS that scales is notoriously hard, even when you’re great at it. It often starts well, when you’re crafting the foundations have full control. But soon, unforeseen requests start arriving, the layout you’ve built is being moved around, and you have to undo most of what you’ve done. Soon, you realize that your component-based architecture isn’t as resilient as you thought, and it feels like the best thing you can do is to start over.

Yet, there’s one methodology that’s specially made for change, because instead of being tied to your project, it’s tied to your style guide. This methodology is called utility-first CSS.

Transcript

3. Me Our CSS Conflicting media queries !important styles Styles that seem to do nothing but we’re too scared to remove
4. HTML <a class="flex justify-between items-center mx-24 py-16 border-solid border-b border-telluric-blue-opacity- solstice-blue no-underline transition-fast-out" href="/doc/faq/accounts-billing/do-i-need-to-display-the-al <span class="block mr-16"> Do I need to display the Algolia logo when I am on the Free plan ? "</span> <span shrink w-4 h-4 opacity-50 fill-current rotate-270"> <svg class="block h-full" xmlns="http:"//""www.w3.org/2000 d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z""/> justify-between items-center mx-24 py-16 border-solid border-b border-telluric-blue-opacity-10 text-telluri underline transition-fast-out" href="/doc/faq/accounts-billing/do-you-offer-a-sandbox-for-development-and-a class="block mr-16"> Do you offer a Sandbox for development and a staging environment? "</span> <span class= h-4 opacity-50 fill-current rotate-270"> <svg class="block h-full" xmlns="http:"//""www.w3.org/2000/svg" viewB 71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0,1,1,1.42,1.42l-6,6A1,1,0,0,1,7,8Z""/> "</svg> "</span> "</a center mx-24 py-16 border-solid border-b border-telluric-blue-opacity-10 text-telluric-blue hover:text-sols out" href="/doc/faq/accounts-billing/does-algolia-provide-a-free-trial/"> <span class="block mr-16"> Does A <span class="block flex-no-grow flex-no-shrink w-4 h-4 opacity-50 fill-current rotate-270"> <svg class="blo 2000/svg" viewBox="0 0 14 8"> <path d="M7,8a1,1,0,0,1-.71-.29l-6-6A1,1,0,0,1,1.71.29L7,5.59,12.29.29a1,1,0, svg> "</span> "</a> <a class="flex justify-between items-center mx-24 py-16 border-solid border-b border-tell hover:text-solstice-blue no-underline transition-fast-out" href="/doc/faq/accounts-billing/how-algolia-coun class="block mr-16"> How does Algolia count records and operations? "</span> <span class="block flex-no-grow current rotate-270"> <svg class="block h-full" xmlns="http:"//""www.w3.org/2000/svg" viewBox="0 0 14 8"> <path
5. HTML <figure class="flex flex-column"> <img class="border-thick border-gray rounded" src="""..."> <figcaption class="margin-top-small text-gray"> Look at me! "</figcaption> "</figure> UTILITY-FIRST CSS
6. HTML <figure class="photo"> <img class="photo-img" src="""..."> <figcaption class="photo-caption"> Look at me! "</figcaption> "</figure> COMPONENT-FIRST CSS
7. You, maybe
8. In Defense of Utility-First CSS DOTC SS 2019 SARAH DAYAN | SO FTWA RE ENGINEER @ A LGOL IA
9. 01010101 01110100 01101001 01101100 01101001 01110100 01111001 00100000 01100110 01101001 01110010 01110011 01110100 00100000 01000011 01010011 01010011 00100000 01101001 01110011 00100000 01100110 01110010 01100101 01100001 01101011 01101001 01101110 01100111 00100000 01100001 01110111 01100101 01110011 01101111 01101101 01100101 00101110 The myth of separation of concerns
11. CSS Zen Garden is a technical demonstration, not a best practice.
13. Strict separation of concerns between HTML and CSS is impractical.
14. HTML CSS CSS HTML
15. When you think about the relationship between HTML and CSS in terms of "separation of concerns", it's very black and white. Instead, think about dependency direction. Adam Wathan, creator of Tailwind CSS
16. HTML <div class="testimonials"> <h2>Testimonials"</h2> <h3>Read what our awesome customers have to say."</h3> <div class="testimonials-inner"> <div class="testimonial"> <img src="""..." alt="""..."> <h4>Stephen King"</h4> <p>This utility-first thingy looks legit AF."</p> "</div> <div class="testimonial"> <img src="""..." alt="""..."> <h4>Lady Gaga"</h4> <p>I recommended this to all my little monsters."</p> "</div> "</div> "</div>
17. CSS .testimonials { color: #c5c9e0; } .testimonials h2 { font-size: 18px; color: #3a416f; } .testimonials h3 { font-size: 14px; } .testimonial-inner { display: flex; } .testimonial h4 { font-size: 12px; color: #3a416f; } .testimonial img { width: 40px; height: 40px; }
18. HTML - + + <div class="testimonials"> <h2>Testimonials"</h2> <h3>Read what our awesome customers have to say."</h3> <div class="testimonials-inner"> <div class="testimonial"> <img src="""..." alt="""..."> <h3>Stephen King"</h3> <p>This utility-first thingy looks legit AF."</p> "</div> <div class="testimonial"> <img src="""..." alt="""..."> <h3>Lady Gaga"</h3> <p>I recommended this to all my little monsters."</p> "</div> "</div> "</div>
19. CSS - .testimonials { color: #c5c9e0; } .testimonials h2 { font-size: 18px; color: #3a416f; } .testimonials h3 { font-size: 14px; } .testimonial-inner { display: flex; } .testimonial h4 { font-size: 12px; color: #3a416f; } .testimonial img { width: 40px; height: 40px; }
20. CSS - + .testimonials { color: #c5c9e0; } .testimonials h2 { font-size: 18px; color: #3a416f; } .testimonials h3 { font-size: 14px; } .testimonial-inner { display: flex; } .testimonial h4 { font-size: 12px; color: #3a416f; } .testimonial img { width: 40px; height: 40px; }
21. HTML <div class="testimonials"> <h2>Testimonials"</h2> <h3>Read what our awesome customers have to say."</h3> <div class="testimonial-inner"> <div class="testimonial"> <img src="""..." alt="""..."> <h4>Stephen King"</h4> <p>This utility-first thingy looks legit AF."</p> "</div> <div class="testimonial"> <img src="""..." alt="""..."> <h4>Lady Gaga"</h4> <p>I recommended this to all my little monsters."</p> "</div> "</div> "</div>
22. CSS works better when used as a library.
23. OOCSS by Nicole Sullivan
24. HTML <div class="testimonials"> <h2 class="title">Testimonials"</h2> <h3 class="tagline">Read what our awesome customers have to say."</h3> <div class="inner"> <div class="testimonial"> <img class="img" src="""..." alt="""..."> <h4 class="name">Stephen King"</h4> <p class="text">This utility-first thingy looks legit AF."</p> "</div> <div class="testimonial"> <img class="img" src="""..." alt="""..."> <h4 class="name">Lady Gaga"</h4> <p class="text">I recommended this to all my little monsters."</p> "</div> "</div> "</div>
25. Why not stop at component-based CSS?
26. 01010101 01110100 01101001 01101100 01101001 01110100 01111001 00100000 01100110 01101001 01110010 01110011 01110100 00100000 01000011 01010011 01010011 00100000 01101001 01110011 00100000 01100110 01110010 01100101 01100001 01101011 01101001 01101110 01100111 00100000 01100001 01110111 01100101 01110011 01101111 01101101 01100101 00101110 Rethinking Reusability
27. HTML <div class="book-preview"> <h2 class="book-preview-title">The Shining"</h2> <div class="book-preview-summary"> <p>…"</p> "</div> <div class="book-preview-author"> <img class="book-preview-author-img" src="""..." "/> <div class="book-preview-author-detail"> <h3 class="book-preview-author-name">Stephen King"</h3> <p class="book-preview-author-title">American author"</p> "</div> "</div> "</div>
30. HTML <div class="media"> <h2 class="media-title">The Shining"</h2> <div class="media-summary"> <p>…"</p> "</div> <div class="media-author"> <img class="media-img" src="""..." "/> <div class="media-author-detail"> <h3 class="media-author-name">Stephen King"</h3> <p class="media-author-title">American author"</p> "</div> "</div> "</div>
32. Complex UI components aren’t that reusable.
37. In UI design, the atom isn’t the component.
38. Atomic Design Methodology, by Brad Frost bit.ly/2qRoByI
40. Reusing small atoms is more resilient.
41. 01010101 01110100 01101001 01101100 01101001 01110100 01111001 00100000 01100110 01101001 01110010 01110011 01110100 00100000 01000011 01010011 01010011 00100000 01101001 01110011 00100000 01100110 01110010 01100101 01100001 01101011 01101001 01101110 01100111 00100000 01100001 01110111 01100101 01110011 01101111 01101101 01100101 00101110 CSS as a Design System
42. JSX const Testimonial = ({ author, img, children }) "=> ( <div className="flex bg-white shadow rounded-sm"> {img "&& <img className="w-30 h-30" src={img} alt={author} "/>} <div> <h4 className="text-lg text-gray-dark">{author}"</h4> <p className="text-md text-gray-medium">{children}"</p> "</div> "</div> );
43. JSX const App = () "=> ( <div> <h2 className="text-xl text-gray-dark">Testimonials"</h2> <h3 className="text-md text-gray-medium">""..."</h3> <Testimonial author="Stephen King" img="""..."> This utility-first thingy looks legit AF. "</Testimonial> <Testimonial author="Lady Gaga" img="""..."> I recommended this to all my little monsters. "</Testimonial> "</div> );
44. But it’s like inline styles!
45. <h4 style="font-size: 18px; color: #757575;"> <h4 class="text-lg text-gray-dark">
46. But the HTML will get so heavy!
47. HTML <div class="fixed z-100 bg-gray-100 inset-x-0 top-0 border-b-2 border-gray-200 lg:border-b-0 lg:static flex <div class="w-full max-w-screen-xl relative mx-auto px-6"> <div class="lg:border-b-2 lg:border-gray-200 h-2 justify-center"> <div class="flex items-center -mx-6"> <div class="lg:w-1/4 xl:w-1/5 pl-6 pr-6"> <div class center"> <a href="/" class="block">Tailwind CSS"</a> "</div>"</div><div class="flex flex-grow lg:w-3/4 xl:w-4/ full lg:px-6 lg:w-3/4 xl:px-12"> <div class="relative"> <input id="docsearch" class="transition bg-white sh focus:outline-none border border-transparent placeholder-gray-600 rounded-lg py-2 pr-4 pl-10 block w-full a leading-normal" type="text" placeholder="Search the docs (Press &quot;/&quot; to focus)"> <div class="point absolute inset-y-0 left-0 pl-4 flex items-center"> <svg class="fill-current pointer-events-none text-gray-6 xmlns="http:"//""www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z""/>"</svg> "</div>"</div>"</div><button type="button" id="sid class="text-gray-500 focus:outline-none focus:text-gray-700 flex px-6 items-center lg:hidden"> <svg class=" h-4" xmlns="http:"//""www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H button type="button"> <button type="button" id="sidebar-close" class="text-gray-500 focus:outline-none focu hidden flex px-6 items-center lg:hidden"> <svg class="fill-current w-4 h-4" xmlns="http:"//""www.w3.org/2000/s 20"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.41 10l7.071-7.071-1.414-1.414L10 8.586z""/>"</svg> "</button type="button"> <div class="hidden lg:flex lg:items-c between xl:w-1/4 px-6"> <div class="relative mr-4"> <select data-version-switcher class="appearance-none bl pl-2 pr-8 py-1 text-gray-500 font-medium text-base focus:outline-none focus:text-gray-800"> <option value="
48. <div class="flex flex-col font-sans min-h-screen text-base"> <div class=" ec1dec286d ">
49. 513.09 KB UTILITY-FIRST 441.67 KB SEMANTIC 34.87 KB 33.69 KB Uncompressed Gzip Brotli 50.36 KB 47.66 KB
50. 0KB 32,5KB 65KB 97,5KB 130KB CSS size on algolia.com/doc (uncompressed) 50 KB 125 KB Before utility-first After utility-first
51. But it’s ugly!
52. HTML <figure class="photo"> <img class="photo"__img photo"__img"--framed" src="""..."> <figcaption class="photo"__caption photo"__caption"--large"> Look at me! "</figcaption> "</figure>
54. Can we still use components?
55. Click me Click me too ?
56. Keep your options open.
57. Embrace change, within reason.
58. Thank you! bit.ly/2pO9aGX @frontstuff_io