Utility CSS 2019

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