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

Utility-First CSS: Build a clean Component based system

Caneco
March 22, 2019
1.1k

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

Caneco

March 22, 2019
Tweet

Transcript

  1. Yeah, that's a big title.

    View full-size slide

  2. Can be hard, right?

    View full-size slide

  3. ✋ Do you "Front-End"?

    View full-size slide

  4. Do you write CSS? ✍

    View full-size slide

  5. Still remember your
    last CSS nightmare?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Yeah, that's a big title.

    View full-size slide

  9. Once upon a time…

    View full-size slide

  10. Before CSS was cool

    View full-size slide

  11. ¸

    Lorem Ipsum
    !!
    1.
    2.
    3.

    View full-size slide

  12. And then in 1996

    View full-size slide

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

    View full-size slide

  14. Finally it was easy to style

    View full-size slide

  15. Browsers started to adopt CSS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. CSS Zen Garden (

    View full-size slide

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

    View full-size slide

  20. Tradicional CSS

    View full-size slide




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

    View full-size slide

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

    View full-size slide

  23. Introducing BEM

    block!__element!--modifier

    View full-size slide

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

    View full-size slide

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

    View full-size slide



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

    View full-size slide

  27. Author Block

    View full-size slide

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

    View full-size slide

  29. Author Block
    NEW Post Block

    View full-size slide

  30. How to stay "Semantic"?

    View full-size slide

  31. ¸


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

    View full-size slide

  32. ¸


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

    View full-size slide

  33. A wild Stakeholder appears
    A wild Stakeholder appears

    View full-size slide

  34. Can you pull
    that CTA
    section up?

    View full-size slide

  35. What about
    that space?

    View full-size slide

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

    View full-size slide

  37. A wild Stakeholder appears
    A wild Stakeholder appears
    A wild Stakeholder appears

    View full-size slide

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

    View full-size slide

  39. What about
    that space?

    View full-size slide

  40. ¸
    .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 full-size slide

  41. Update CSS is hard

    View full-size slide

  42. Delete CSS is harder

    View full-size slide

  43. CSS is at least
    unpredictable

    View full-size slide

  44. .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 full-size slide

  45. .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 full-size slide

  46. Piling up CSS
    becomes much easier

    View full-size slide

  47. Time Time Time Time
    Traditional CSS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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!--text-left {!!...}
    .block!__E!--again { screw: 'it' !important }
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.

    View full-size slide

  52. .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 full-size slide

  53. Isn't that utility classes?

    View full-size slide

  54. .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 full-size slide

  55. It's like sprinkling sugar

    View full-size slide

  56. What if we go all-in?

    View full-size slide

  57. ¸
    !!...!
    1.
    2.
    3.

    View full-size slide

  58. It's like LEGO
    LEGO

    View full-size slide

  59. …or an API for design

    View full-size slide

  60. Presenting utility-first CSS

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

    View full-size slide

  61. There's many solutions

    View full-size slide

  62. Atomic CSS 

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

    View full-size slide

  63. Tachyons CSS 

    br-100 ba h3 w3 dib

    View full-size slide

  64. Tailwind CSS 

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

    View full-size slide

  65. Better just use inline styles…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  70. UI elements
    without writing CSS

    View full-size slide

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

    View full-size slide

  72. Dependency shift

    View full-size slide

  73. TW.CSS
    HOME.HTML
    APP.HTML
    LEAD.HTML

    View full-size slide

  74. Also ship once
    and you're good ⛴

    View full-size slide

  75. Time Time Time Time
    Traditional CSS Utilities CSS

    View full-size slide

  76. Gotta be honest…

    View full-size slide

  77. It can be a bit verbose

    View full-size slide

  78. ¸

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

    View full-size slide

  79. How to abstract/simplify?

    View full-size slide

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

    View full-size slide

  81. ¸

    !!!
    !1.
    2.
    3.
    4.
    5.

    View full-size slide

  82. Using JavaScript

    View full-size slide

  83. ¸
    !// NavLink.vue

    View full-size slide

  84. Designers Developers

    View full-size slide

  85. Designers & Developers

    View full-size slide

  86. And for the last year

    View full-size slide

  87. 1. Become a lot faster

    View full-size slide

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

    View full-size slide

  89. 2. Less fear of changes

    View full-size slide

  90. Even update the CSS
    framework is simpler

    View full-size slide

  91. 3. Updating projects it's easier

    View full-size slide

  92. Adding a new UI element
    to 6 month project

    View full-size slide

  93. For me it's a no-brainer

    View full-size slide

  94. Is this for you?

    View full-size slide