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 Slide

  2. Hello

    View Slide

  3. So, CSS…

    View Slide

  4. View Slide

  5. Can be hard, right?

    View Slide

  6. ✋ Do you "Front-End"?

    View Slide

  7. Do you write CSS? ✍

    View Slide

  8. Still remember your
    last CSS nightmare?

    View Slide

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

    View Slide

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

    View Slide

  11. Yeah, that's a big title.

    View Slide

  12. Once upon a time…

    View Slide

  13. Before CSS was cool

    View Slide

  14. ¸

    Lorem Ipsum
    !!
    1.
    2.
    3.

    View Slide

  15. And then in 1996

    View Slide

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

    View Slide

  17. Finally it was easy to style

    View Slide

  18. Browsers started to adopt CSS

    View Slide

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

    View Slide

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

    View Slide

  21. CSS Zen Garden (

    View Slide

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

    View Slide

  23. Tradicional CSS

    View Slide




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

    View Slide

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

    View Slide

  26. Introducing BEM

    block!__element!--modifier

    View Slide

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

    View Slide

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

    View Slide



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

    View Slide

  30. Author Block

    View Slide

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

    View Slide

  32. Author Block
    NEW Post Block

    View Slide

  33. How to stay "Semantic"?

    View Slide

  34. ¸


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

    View Slide

  35. ¸


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

    View Slide

  36. View Slide

  37. A wild Stakeholder appears
    A wild Stakeholder appears

    View Slide

  38. Can you pull
    that CTA
    section up?

    View Slide

  39. Erm… sure

    View Slide

  40. What about
    that space?

    View Slide

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

    View Slide

  42. View Slide

  43. A wild Stakeholder appears
    A wild Stakeholder appears
    A wild Stakeholder appears

    View Slide

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

    View Slide

  45. What about
    that space?

    View Slide

  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.

    View Slide

  47. Update CSS is hard

    View Slide

  48. Delete CSS is harder

    View Slide

  49. CSS is at least
    unpredictable

    View Slide

  50. View 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!--tet-left {!!...}
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.

    View Slide

  52. !important

    View Slide

  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.

    View Slide

  54. Piling up CSS
    becomes much easier

    View Slide

  55. Time Time Time Time
    Traditional CSS

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  61. Isn't that utility classes?

    View Slide

  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.

    View Slide

  63. View Slide

  64. It's like sprinkling sugar

    View Slide

  65. View Slide

  66. What if we go all-in?

    View Slide

  67. ¸ !!...!
    1.

    View Slide

  68. ¸
    !!...!
    1.
    2.
    3.

    View Slide

  69. It's like LEGO
    LEGO

    View Slide

  70. …or an API for design

    View Slide

  71. Presenting utility-first CSS

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

    View Slide

  72. There's many solutions

    View Slide

  73. Atomic CSS 

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

    View Slide

  74. Tachyons CSS 

    br-100 ba h3 w3 dib

    View Slide

  75. Tailwind CSS 

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

    View Slide

  76. Better just use inline styles…

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  81. UI elements
    without writing CSS

    View Slide

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

    View Slide

  83. Dependency shift

    View Slide

  84. TW.CSS
    HOME.HTML
    APP.HTML
    LEAD.HTML

    View Slide

  85. Also ship once
    and you're good ⛴

    View Slide

  86. Time Time Time Time
    Traditional CSS Utilities CSS

    View Slide

  87. Gotta be honest…

    View Slide

  88. It can be a bit verbose

    View Slide

  89. ¸

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

    View Slide

  90. View Slide

  91. How to abstract/simplify?

    View Slide

  92. Using CSS

    View Slide

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

    View Slide

  94. Using PHP

    View Slide

  95. ¸

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

    View Slide

  96. Using JavaScript

    View Slide

  97. ¸
    !// NavLink.vue

    View Slide

  98. Designers Developers

    View Slide

  99. Designers & Developers

    View Slide

  100. And for the last year

    View Slide

  101. 1. Become a lot faster

    View Slide

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

    View Slide

  103. 2. Less fear of changes

    View Slide

  104. Even update the CSS
    framework is simpler

    View Slide

  105. 3. Updating projects it's easier

    View Slide

  106. Adding a new UI element
    to 6 month project

    View Slide

  107. For me it's a no-brainer

    View Slide

  108. Is this for you?

    View Slide

  109. Thank you

    View Slide

  110. View Slide