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

Utility CSS

Utility CSS

A small presentation highlighting the advantages (and pitfalls) of utility-based CSS

5fc5804101f0367b6faeee18a6cebe30?s=128

Daniel Fosco

May 23, 2018
Tweet

Transcript

  1. UTILITY-BASED CSS

  2. None
  3. None
  4. None
  5. “Just use BEM”

  6. THE PROBLEM WITH CONVENTION IS THAT IT'S USUALLY OPTIONAL

  7. None
  8. A BUNCH OF SMALL PROPERTIES THAT JUST DO A SINGLE

    THING
  9. None
  10. None
  11. None
  12. A UTILITY CLASS FOR EVERYTHING

  13. .padding-top-smallest .padding-top-smaller .padding-top-small .padding-top-medium .flex .flex-column .flex-row .bg-primary .bg-primary-light .bg-primary-lighter

    .bg-primary-lightest
  14. None
  15. None
  16. None
  17. None
  18. GOOD DEFAULTS SENSIBLE SCALE

  19. None
  20. None
  21. None
  22. YOU DON'T WRITE CSS YOU JUST USE CSS (MOSTLY)

  23. THE GOOD OPTIONS ARE YOUR ONLY OPTIONS (MOSTLY)

  24. A CONSTRAINED SET OF TOOLS INSTEAD OF CONVENTIONS (MOSTLY)

  25. DEMO

  26. THE CLEAR DOWNSIDE... IS THAT YOU HAVE TO GET USED

    TO IT
  27. STYLES DON'T OVERWRITE EACH OTHER NO SIDE-EFFECTS

  28. None
  29. YOU DON'T NEED TO KEEP TRACK OF YOUR CSS

  30. None
  31. PERFORMANCE

  32. None
  33. 184

  34. 123

  35. .db { display: block } .fl { float: left }

  36. 65% REDUCTION

  37. BFFS WITH BUI

  38. REFACTORING CSS HOLDS VERY LITTLE BUSINESS VALUE

  39. 1. Get feedback and align with IQ 2. Refine library

    to only what we need 3. Document and make it accessible to designers 4. Merge with BUI (what makes sense)
  40. THANKS GO/ATOMIC-CSS-LINKS