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

    View full-size slide

  2. HTML
    Do I need to display the Algolia logo when I am on the Free plan ? " shrink w-4 h-4 opacity-50 fill-current rotate-270"> 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? " h-4 opacity-50 fill-current rotate-270"> 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""/> " " "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/"> Does A
    " How does Algolia count records and operations? "

    View full-size slide

  3. HTML



    Look at me!
    "
    "
    UTILITY-FIRST CSS

    View full-size slide

  4. HTML



    Look at me!
    "
    "
    COMPONENT-FIRST CSS

    View full-size slide

  5. In Defense
    of Utility-First CSS
    DOTC SS 2019
    SARAH DAYAN | SO FTWA RE ENGINEER @ A LGOL IA

    View full-size slide

  6. 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

    View full-size slide

  7. CSS Zen Garden is
    a technical demonstration,
    not a best practice.

    View full-size slide

  8. Strict separation of
    concerns between HTML
    and CSS is impractical.

    View full-size slide

  9. HTML CSS
    CSS HTML

    View full-size slide

  10. 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

    View full-size slide

  11. HTML

    Testimonials"
    Read what our awesome customers have to say."



    Stephen King"
    This utility-first thingy looks legit AF."
    "


    Lady Gaga"
    I recommended this to all my little monsters."
    "
    "
    "

    View full-size slide

  12. 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;
    }

    View full-size slide

  13. HTML
    -
    +
    +

    Testimonials"
    Read what our awesome customers have to say."



    Stephen King"
    This utility-first thingy looks legit AF."
    "


    Lady Gaga"
    I recommended this to all my little monsters."
    "
    "
    "

    View full-size slide

  14. 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;
    }

    View full-size slide

  15. 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;
    }

    View full-size slide

  16. HTML

    Testimonials"
    Read what our awesome customers have to say."



    Stephen King"
    This utility-first thingy looks legit AF."
    "


    Lady Gaga"
    I recommended this to all my little monsters."
    "
    "
    "

    View full-size slide

  17. CSS works better
    when used as a library.

    View full-size slide

  18. OOCSS
    by Nicole Sullivan

    View full-size slide

  19. HTML

    Testimonials"
    Read what our awesome customers have to say."



    Stephen King"
    This utility-first thingy looks legit AF."
    "


    Lady Gaga"
    I recommended this to all my little monsters."
    "
    "
    "

    View full-size slide

  20. Why not stop at
    component-based CSS?

    View full-size slide

  21. 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

    View full-size slide

  22. HTML

    The Shining"

    …"
    "



    Stephen King"
    American author"
    "
    "
    "

    View full-size slide

  23. HTML

    The Shining"

    …"
    "



    Stephen King"
    American author"
    "
    "
    "

    View full-size slide

  24. Complex UI components
    aren’t that reusable.

    View full-size slide

  25. In UI design, the atom
    isn’t the component.

    View full-size slide

  26. Atomic Design Methodology, by Brad Frost bit.ly/2qRoByI

    View full-size slide

  27. Reusing small atoms is
    more resilient.

    View full-size slide

  28. 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

    View full-size slide

  29. JSX
    const Testimonial = ({ author, img, children }) "=> (

    {img "&& }

    {author}"
    {children}"
    "
    "
    );

    View full-size slide

  30. JSX
    const App = () "=> (

    Testimonials"
    ""..."

    This utility-first thingy looks legit AF.
    "

    I recommended this to all my little monsters.
    "
    "
    );

    View full-size slide

  31. But it’s like inline styles!

    View full-size slide

  32. But the HTML will get so heavy!

    View full-size slide

  33. HTML
    center"> Tailwind CSS" "" " """ 20">" "

    View full-size slide

  34. 513.09 KB
    UTILITY-FIRST
    441.67 KB
    SEMANTIC
    34.87 KB 33.69 KB
    Uncompressed
    Gzip
    Brotli
    50.36 KB 47.66 KB

    View full-size slide

  35. 0KB
    32,5KB
    65KB
    97,5KB
    130KB
    CSS size on algolia.com/doc (uncompressed)
    50 KB
    125 KB
    Before utility-first After utility-first

    View full-size slide

  36. But it’s ugly!

    View full-size slide

  37. HTML



    Look at me!
    "
    "

    View full-size slide

  38. Can we still use components?

    View full-size slide

  39. Click me
    Click me too
    ?

    View full-size slide

  40. Keep your
    options open.

    View full-size slide

  41. Embrace change,
    within reason.

    View full-size slide

  42. Thank you!
    bit.ly/2pO9aGX
    @frontstuff_io

    View full-size slide