Utility CSS 2019

Updated version of my presentation highlighting the advantages (and pitfalls) of utility-based CSS

Transcript

1. UTILITY CSS
2. WHAT
3. WHAT HOW
4. WHAT HOW AND WHY
5. WHAT IS ATOMIC CSS FUNCTIONAL CSS
6. ATOMIC DESIGN BRAD FROST
9. .padding-small { padding: 15px; } .white { color: white } .bg-blue { background-color: blue; }
12. .u-display-block { display: block } .u-display-inline { display: inline } .u-display-inline-block { display: inline-block } .u-position-relative { position: relative }
19. REFACTOR ALL THE STYLES!
20. INSPIRATION TO MAKE OUR CSS MORE... CONSISTENT MANTAINABLE PERFORMANT
21. CONSISTENCY
24. GOOD DEFAULTS SENSIBLE SCALE
29. THE GOOD OPTIONS ARE YOUR ONLY OPTIONS
30. YOU DON'T WRITE CSS YOU JUST USE CSS
31. WRITE MARKUP
32. WRITE MARKUP → SAVE
33. WRITE MARKUP → SAVE → REFRESH
34. DEMO
35. MANTAINABILITY
37. FUNCTIONAL CSS FUNCTIONAL PROGRAMMING
38. PURE FUNCTIONS
39. FOR A GIVEN INPUT THE OUTPUT WILL ALWAYS BE THE SAME
40. X × 2
41. 2 × 2 → 4
42. 2 × 2 → 4 3 × 2 → 6
43. 2 × 2 → 4 3 × 2 → 6 2 × 2 → 5
44. .class { color: blue }
45. .another { color: red } .class { color: blue }
47. STYLES DON'T OVERWRITE EACH OTHER NO SIDE-EFFECTS
48. YOU DON'T NEED TO KEEP TRACK OF YOUR CSS
49. PERFORMANCE
50. The Problem with CSS
54. 184
55. 123
56. 499
57. .db { display: block }
58. .fl { float: left }
60. WHAT DOES THIS MEAN IN REAL LIFE?
63. 508KB TO 175KB 65% REDUCTION
64. IT CAN BE MADE EVEN SMALLER
65. m.booking.com
66. REFACTORING CSS HOLDS VERY LITTLE BUSINESS VALUE
67. How can we explore Atomic CSS to improve our user experience and development process?
68. THANKS! !
69. bit.ly/functional-css-presentation