Utility CSS

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

Transcript

1. UTILITY-BASED CSS
5. “Just use BEM”
6. THE PROBLEM WITH CONVENTION IS THAT IT'S USUALLY OPTIONAL
8. A BUNCH OF SMALL PROPERTIES THAT JUST DO A SINGLE THING
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
18. GOOD DEFAULTS SENSIBLE SCALE
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
29. YOU DON'T NEED TO KEEP TRACK OF YOUR CSS
31. PERFORMANCE
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