Upgrade to Pro — share decks privately, control downloads, hide ads and more …

In Defense of Utility-First CSS

Sarah Dayan
December 04, 2019

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.

Sarah Dayan

December 04, 2019
Tweet

Other Decks in Technology

Transcript

  1. Me Our CSS Conflicting media queries !important styles Styles that

    seem to do nothing but we’re too scared to remove
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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>
  7. 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; }
  8. 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>
  9. 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; }
  10. 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; }
  11. 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>
  12. 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>
  13. 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
  14. 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>
  15. 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>
  16. 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
  17. 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> );
  18. 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> );
  19. 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="
  20. 513.09 KB UTILITY-FIRST 441.67 KB SEMANTIC 34.87 KB 33.69 KB

    Uncompressed Gzip Brotli 50.36 KB 47.66 KB
  21. 0KB 32,5KB 65KB 97,5KB 130KB CSS size on algolia.com/doc (uncompressed)

    50 KB 125 KB Before utility-first After utility-first