Utility CSS 2019

Utility CSS 2019

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

5fc5804101f0367b6faeee18a6cebe30?s=128

Daniel Fosco

March 18, 2019
Tweet

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

  7. None
  8. None
  9. .padding-small { padding: 15px; } .white { color: white }

    .bg-blue { background-color: blue; }
  10. None
  11. None
  12. .u-display-block { display: block } .u-display-inline { display: inline }

    .u-display-inline-block { display: inline-block } .u-position-relative { position: relative }
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. REFACTOR ALL THE STYLES!

  20. INSPIRATION TO MAKE OUR CSS MORE... CONSISTENT MANTAINABLE PERFORMANT

  21. CONSISTENCY

  22. None
  23. None
  24. GOOD DEFAULTS SENSIBLE SCALE

  25. None
  26. None
  27. None
  28. None
  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

  36. None
  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 }

  46. None
  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

  51. None
  52. None
  53. None
  54. 184

  55. 123

  56. 499

  57. .db { display: block }

  58. .fl { float: left }

  59. None
  60. WHAT DOES THIS MEAN IN REAL LIFE?

  61. None
  62. None
  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