Believe in the Power of CSS

You know that song by Huey Lewis and the News, The Power of Love? "First time you feel it, it might make you sad." Might be how you feel about CSS right? What about the power of CSS? CSS has received a bad name as of late, but truth of the matter is that CSS is such a powerful piece of the front-end puzzle and you should really be excited for what's already here and what's to come! Who would have thought we could create magazine-style layouts with CSS grid? What about ruleset variable scoping with custom properties(CSS variables)? And last but not least, the pain of centering content horizontally and vertically which is now possible in three lines with flexbox! Let's talk about how awesome CSS is, and how we can restore our faith in one of the best things that makes the web amazing!

Transcript

1. Twitter: saltnburnem | Site: chrisdemars.com
2. 2 Chris DeMars ! @saltnburnem Disclaimer
3. 2 Chris DeMars ! @saltnburnem Disclaimer I CSS
4. 3 Chris DeMars ! @saltnburnem Not in this talk Styled components Css-in-js
5. 4 Chris DeMars ! @saltnburnem
6. 4 CSS Chris DeMars ! @saltnburnem
7. 4 CSS CSS Chris DeMars ! @saltnburnem
8. 4 CSS CSS CSS Chris DeMars ! @saltnburnem
9. 4 CSS CSS CSS CSS Chris DeMars ! @saltnburnem
10. 4 CSS CSS CSS CSS CSS Chris DeMars ! @saltnburnem
11. 5 “CSS is a key development skill.” - Ivana McConnell @ CSSConf AU Chris DeMars ! @saltnburnem
12. 6 “…also the problems with how we devalue things like CSS…” - Ivana Michael @ CSSConf AU Chris DeMars ! @saltnburnem
13. 7 CSS IS STILL A THING! Chris DeMars ! @saltnburnem
14. 8 Chris DeMars ! @saltnburnem
15. 8 Chris DeMars ! @saltnburnem
16. 9 Twitter: @TaleFTScript | Site: tftscript.com Chris DeMars ! @saltnburnem
17. 10 Chris DeMars ! @saltnburnem
18. 11 Chris DeMars ! @saltnburnem Una kravets https://youtu.be/IRI1H5tyEAo Front-trends 2017 The power of css
19. 12 Chris DeMars ! @saltnburnem
20. 13 Chris DeMars ! @saltnburnem
21. 14 Chris DeMars ! @saltnburnem
22. 15 Hakon Wium Lie Bert Bos Chris DeMars ! @saltnburnem
23. 16 Wes Bos Bert Bos Chris DeMars ! @saltnburnem
24. 16 Wes Bos Bert Bos Chris DeMars ! @saltnburnem
25. 17 Chris DeMars ! @saltnburnem
26. 18 Chris DeMars ! @saltnburnem
27. 19 Chris DeMars ! @saltnburnem
28. 19 Flexbox Chris DeMars ! @saltnburnem
29. 19 Grid Flexbox Chris DeMars ! @saltnburnem
30. 19 Grid Flexbox CSS variables Chris DeMars ! @saltnburnem
31. 19 Grid Flexbox CSS variables Blend modes Chris DeMars ! @saltnburnem
32. 19 Grid Flexbox CSS variables Blend modes Viewport units Chris DeMars ! @saltnburnem
33. 19 Grid Flexbox CSS variables Blend modes Accessibility Viewport units Chris DeMars ! @saltnburnem
34. 19 Grid Flexbox CSS variables Blend modes Accessibility Viewport units And more… Chris DeMars ! @saltnburnem
35. 20 Chris DeMars ! @saltnburnem
36. 21 Chris DeMars ! @saltnburnem Oocss
37. 21 Chris DeMars ! @saltnburnem Oocss
38. 22 Chris DeMars ! @saltnburnem Block__Element--Modifier Block_Element-Modifier Double-Double Single-Single
39. 23 Chris DeMars ! @saltnburnem Oocss
40. 23 Chris DeMars ! @saltnburnem Oocss
41. 23 Chris DeMars ! @saltnburnem Oocss
42. 23 Chris DeMars ! @saltnburnem Oocss
43. 23 Chris DeMars ! @saltnburnem Oocss
44. 24 Makes writing css fun! Chris DeMars ! @saltnburnem
45. 24 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable
46. 24 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable Modular
47. 24 Makes writing css fun! Chris DeMars ! @saltnburnem Maintainable Modular Flexible
48. 25 Chris DeMars ! @saltnburnem https://bit.ly/2GRhU2T
49. 26 Chris DeMars ! @saltnburnem
50. 27 Chris DeMars ! @saltnburnem
51. 28 One dimension Chris DeMars ! @saltnburnem
52. 29 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Chris DeMars ! @saltnburnem
53. 30 #1 problem Chris DeMars ! @saltnburnem
54. 31 Centering Chris DeMars ! @saltnburnem
55. 32 Chris DeMars ! @saltnburnem
56. 32 Chris DeMars ! @saltnburnem
57. 33 Chris DeMars ! @saltnburnem
58. 34 Chris DeMars ! @saltnburnem
59. 35 Two dimensions Chris DeMars ! @saltnburnem
60. 36 Rows & columns Chris DeMars ! @saltnburnem
61. 37 Chris DeMars ! @saltnburnem
62. 37 Chris DeMars ! @saltnburnem
63. 38 Chris DeMars ! @saltnburnem
64. 38 Chris DeMars ! @saltnburnem
65. 39 Chris DeMars ! @saltnburnem
66. 39 Chris DeMars ! @saltnburnem
67. 40 Chris DeMars ! @saltnburnem
68. 40 Chris DeMars ! @saltnburnem
69. 41 Chris DeMars ! @saltnburnem
70. 41 Chris DeMars ! @saltnburnem
71. 42 Jen Simmons Rachel Andrew Chris DeMars ! @saltnburnem
72. 43 Chris DeMars ! @saltnburnem
73. 44 Chris DeMars ! @saltnburnem
74. 45 Chris DeMars ! @saltnburnem
75. 45 Chris DeMars ! @saltnburnem
76. 46 Chris DeMars ! @saltnburnem
77. 47 Chris DeMars ! @saltnburnem
78. 48 Chris DeMars ! @saltnburnem
79. 48 Chris DeMars ! @saltnburnem
80. 49 Chris DeMars ! @saltnburnem
81. 49 Chris DeMars ! @saltnburnem
82. 50 Chris DeMars ! @saltnburnem
83. 51 Chris DeMars ! @saltnburnem
84. 51 Chris DeMars ! @saltnburnem
85. 52 Sass & less Variables Chris DeMars ! @saltnburnem
86. 53 Can’t change dynamically Dom unaware No js targets Drawbacks Chris DeMars ! @saltnburnem
87. 54 Cascade Inheritance js targets Pros of css vars Chris DeMars ! @saltnburnem
88. 55 Use cases For Custom props Chris DeMars ! @saltnburnem
89. 56 Emulate Non-existent Rules https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem
90. 57 Themes https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem
91. 57 Themes https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem
92. 58 Support? https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem
93. 59 Support? https://bit.ly/2opAqp4 Chris DeMars ! @saltnburnem
94. 60 Css variables Syntax Chris DeMars ! @saltnburnem
95. 61 Chris DeMars ! @saltnburnem
96. 62 Chris DeMars ! @saltnburnem
97. 62 Chris DeMars ! @saltnburnem
98. 63 Chris DeMars ! @saltnburnem
99. 64 Chris DeMars ! @saltnburnem
100. 64 Chris DeMars ! @saltnburnem
101. 65 Image effects in the browser Chris DeMars ! @saltnburnem
102. 66 Chris DeMars ! @saltnburnem
103. 66 Chris DeMars ! @saltnburnem
104. 67 Types Chris DeMars ! @saltnburnem
105. 67 Types Background blend mode Chris DeMars ! @saltnburnem
106. 67 Types Background blend mode Mixed blend mode Chris DeMars ! @saltnburnem
107. 68 Mixed blend mode Chris DeMars ! @saltnburnem
108. 68 Mixed blend mode initial: Default setting of the property that does not set a blend mode. Chris DeMars ! @saltnburnem
109. 68 Mixed blend mode initial: Default setting of the property that does not set a blend mode. inherit: inherits the blend mode from its parent. Chris DeMars ! @saltnburnem
110. 68 Mixed blend mode initial: Default setting of the property that does not set a blend mode. inherit: inherits the blend mode from its parent. Unset: Removes the blend mode from an element. Chris DeMars ! @saltnburnem
111. 69 Chris DeMars ! @saltnburnem
112. 69 Chris DeMars ! @saltnburnem
113. 70 Chris DeMars ! @saltnburnem
114. 71 Numeronym Chris DeMars ! @saltnburnem
115. 71 Numeronym Chris DeMars ! @saltnburnem
116. 71 Numeronym A c c e s s i b i l i t y A 1 2 3 4 5 6 7 8 9 10 11 y A11y Chris DeMars ! @saltnburnem
117. 72 :focus Chris DeMars ! @saltnburnem
118. 73 Don’t do this! Chris DeMars ! @saltnburnem
119. 74 Chris DeMars ! @saltnburnem
120. 74 Chris DeMars ! @saltnburnem
121. 75 :focus-visible Chris DeMars ! @saltnburnem
122. 76 Yayyyyy!!
123. 77 Focus-visible polyfill https://github.com/WICG/focus-visible Chris DeMars ! @saltnburnem
124. 78 Chris DeMars ! @saltnburnem
125. 79 Demo time! Chris DeMars ! @saltnburnem
126. 80 :focus-within Chris DeMars ! @saltnburnem
127. 81 Chris DeMars ! @saltnburnem
128. 82 Chris DeMars ! @saltnburnem
129. 82 Chris DeMars ! @saltnburnem
130. 83 Css feels! Chris DeMars ! @saltnburnem
131. 83 Css feels! Chris DeMars ! @saltnburnem
132. 84 Resources https://css-tricks.com/almanac/properties/b/background-blend-mode/ https://css-tricks.com/basics-css-blend-modes/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://getflywheel.com/layout/css-blend-modes/ https://www.w3.org/Style/CSS20/history.html https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://css-tricks.com/snippets/css/complete-guide-grid/ https://rachelandrew.co.uk/ http://jensimmons.com/ https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables https://css-tricks.com/focusing-on-focus-styles/ https://css-tricks.com/fun-viewport-units/ https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within Chris DeMars ! @saltnburnem
133. 85 Thanks! Chris demars | saltnburnem Chris DeMars ! @saltnburnem https://codepen.io/chrisdemars/ https://bit.ly/2qNA9Q4