Utility-First CSS: Build a clean Component based system

Aff0a25540addff750cbbe6aa884e429?s=47 Caneco
March 22, 2019
930

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

Aff0a25540addff750cbbe6aa884e429?s=128

Caneco

March 22, 2019
Tweet

Transcript

  1. Yeah, that's a big title.

  2. Hello

  3. So, CSS…

  4. None
  5. Can be hard, right?

  6. ✋ Do you "Front-End"?

  7. Do you write CSS? ✍

  8. Still remember your last CSS nightmare?

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

  10. I'm Caneco .PHP .JS .HTML .CSS .JSON .SQL .GIT .BASH

    .SVG .PNG .PSD .AI
  11. Yeah, that's a big title.

  12. Once upon a time…

  13. Before CSS was cool

  14. ¸ <P><FONT SIZE="16" COLOR="RED"> Lorem Ipsum !</FONT>!</P> 1. 2. 3.

  15. And then in 1996

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

    3. 4.
  17. Finally it was easy to style

  18. Browsers started to adopt CSS

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

  20. Even Internet Explorer had 99% CCS1 support in 2000 for

    the Macintosh https://en.wikipedia.org/wiki/Cascading_Style_Sheets
  21. CSS Zen Garden (

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

  23. Tradicional CSS

  24. <div id="author"> <div class="picture"> <img class="rounded" src="!!..."!/> !</div> <div class="name">!!...!</div>

    <div class="description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
  25. ¸ #author .picture {!!...} #author .picture .rounded {!!...} #author .name

    {!!...} #author .description {!!...} #author ul > li b.item {!!...} 1. 2. 3. 4. 5.
  26. Introducing BEM
 block!__element!--modifier

  27. ¸ #author .picture {!!...} #author .picture .rounded {!!...} #author .name

    {!!...} #author .description {!!...} #author ul > li b.item {!!...} 1. 2. 3. 4. 5.
  28. .author!__picture {!!...} .author!__picture!--rounded {!!...} .author!__name {!!...} .author!__description {!!...} .author!__item {!!...}

    1. 2. 3. 4. 5.
  29. <div class="author"> <div class="author!__picture"> <img class="author!__picture!--rounded" src !</div> <div class="author!__name">!!...!</div>

    <div class="author!__description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
  30. Author Block

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

  32. Author Block NEW Post Block

  33. How to stay "Semantic"?

  34. ¸ <div class="author"> <div class="author!__picture"> <img class="author!__picture!--rounded" src !</div> <div

    class="author!__name">!!...!</div> <div class="author!__description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
  35. ¸ <div class="card"> <div class="card!__picture"> <img class="card!__picture!--rounded" src=" !</div> <div

    class="card!__name">!!...!</div> <div class="card!__description">!!...!</div> !</div> 1. 2. 3. 4. 5. 6. 7.
  36. None
  37. A wild Stakeholder appears A wild Stakeholder appears

  38. Can you pull that CTA section up?

  39. Erm… sure

  40. What about that space?

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

  42. None
  43. A wild Stakeholder appears A wild Stakeholder appears A wild

    Stakeholder appears
  44. Can you duplicate the page? But the hero can't have

    a background.
  45. What about that space?

  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.
  47. Update CSS is hard

  48. Delete CSS is harder

  49. CSS is at least unpredictable

  50. None
  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.
  52. !important

  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.
  54. Piling up CSS becomes much easier

  55. Time Time Time Time Traditional CSS

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

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

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

  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.
  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.
  61. Isn't that utility classes?

  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.
  63. None
  64. It's like sprinkling sugar

  65. None
  66. What if we go all-in?

  67. ¸ <button class="hero!__button">!!...!</button> 1.

  68. ¸ <button class=" bg-purple text-white rounded px-4 py-3 ">!!...!</button> 1.

    2. 3.
  69. It's like LEGO LEGO

  70. …or an API for design

  71. Presenting utility-first CSS
 text-black text-5xl font-sans text-center

  72. There's many solutions

  73. Atomic CSS 
 Fl(start) W(300px) Ta(c) P(10px) C(#0280ae)

  74. Tachyons CSS 
 br-100 ba h3 w3 dib

  75. Tailwind CSS 
 bg-blue text-sm border-b-2 uppercase px-4

  76. Better just use inline styles…

  77. ¸ <button style=" background-color: #9561e2; color: white; border-radius: 10px; !/*

    autoprefix? !*/ padding: 3px 4px; ">!!...!</button> 1. 2. 3. 4. 5. 6.
  78. How can you handle? @media @keyframes !::pseudo !--prefix

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

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

  81. UI elements without writing CSS

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

  83. Dependency shift

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

  85. Also ship once and you're good ⛴

  86. Time Time Time Time Traditional CSS Utilities CSS

  87. Gotta be honest…

  88. It can be a bit verbose

  89. ¸ <nav class="flex justify-between items-center <a class="bg-blue text-white rounded px-4

    p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <a class="bg-blue text-white rounded px-4 p <nav> 1. 2. 3. 4. 5. 6. 7.
  90. None
  91. How to abstract/simplify?

  92. Using CSS

  93. ¸ .btn { @apply rounded px-4 py-3 } !!!<!-- then

    in HTML !!--> <a class="btn bg-blue text-white">!</a> 1. 2. 3. 4. 5. 6. 7.
  94. Using PHP

  95. ¸ <?php $btn = 'rounded px-4 py-3' ?> !!!<!-- then

    in HTML !!--> <a class="<!?= $btn ?> bg-blue text-white">!</b 1. 2. 3. 4. 5.
  96. Using JavaScript

  97. ¸ !// NavLink.vue <template> <a class="bg-blue text-white rounded px-4 p

    <slot>!</slot> !</a> !</template> !!!<!-- then in HTML !!--> <NavLink>About us!</NavLink> 1. 2. 3. 4. 5. 6. 7. 8. 9.
  98. Designers Developers

  99. Designers & Developers

  100. And for the last year

  101. 1. Become a lot faster

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

  103. 2. Less fear of changes

  104. Even update the CSS framework is simpler

  105. 3. Updating projects it's easier

  106. Adding a new UI element to 6 month project

  107. For me it's a no-brainer

  108. Is this for you?

  109. Thank you

  110. None