Utility CSS

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