The life of CSS and it's future

CSS is now 21 years old! The current shape of CSS(in JS) has been shaped by learnings all the way from 1994

Transcript

2. Siddharth Kshetrapal
3. @siddharthkp i make things on the internet
4. @siddharthkp i make things on the internet
6. css at scale is hard.
7. css-in-js
11. 1990 Tim Berners-Lee
12. http://info.cern.ch/hypertext/WWW/TheProject.html
14. 1990 <table> <tr> <td width="50%"></td> <td width="50%"></td> </tr> </table>
15. <h1>Hello</h1> 1990
16. <font face="Arial" color="#333333"> <h1>Hello</h1> </font> 1990
17. 1993 Robert Raisch 1st proposal for HTML stylesheets
18. @H1 fo(fa=he,si=18,we=bo) <h1>Hello</h1> 1993 RRP
19. @H1 fo(fa=he,si=18,we=bo) @P co(nu=3,wi=80) <h1>Hello</h1> 1993 RRP
20. 1994 Håkon Wium Lie
21. 1994 Cascading HTML style sheets
22. h1.font.size = 24pt 100% <h1>Hello</h1> 1994 Cascading HTML style sheets
23. h1.font.size = 24pt 100% h2.font.size = 20pt 40% <h1>Hello</h1> 1994 Cascading HTML style sheets
24. h1.font.size = 24pt 100% h2.font.size = 20pt 40% h2.font.size = 24pt 60% <h1>Hello</h1> 1994 Cascading HTML style sheets
26. 1994 Bert Bos
27. ! *H1.size = 2 *H1.slant = true <h1>Hello</h1> 1994 Stream-based style sheets
28. 1995 April WWW3, Germany
29. 1995 Dave Raggett
30. 1996 Language for writing styles Lessons learned
32. 1996 Language for writing styles <font face="Arial" color="#333333"> <h1>Hello</h1> </font>
33. 1996 Language for writing styles <h1>Hello</h1> /* style.css */ h1 { font-family: 'Arial'; color: '#333'; }
34. ?
40. Brendan Eich
41. 1997 JSSS: Javascript Stylesheets css h1 { font-family: 'Arial'; color: '#333'; }
42. js document.tags.H1.fontSize = 'Arial'; document.tags.H1.color = '#333'; 1997 JSSS: Javascript Stylesheets css h1 { font-family: 'Arial'; color: '#333'; }
43. 1997 CSS-in-JS
44. 1997 W3C created a CSS working group Chris Lilley
45. 1998 CSS 2 css h1 { position: absolute; }
46. css h1 { position: absolute; z-index: 99999999; } 1998 CSS 2
47. 1998 CSS 2 css h1 { position: absolute; z-index: 99999999; } @media screen and (min-width: 480px) { h1 { padding: 1rem 3rem; } }
48. 1998 Opera
49. 1998 Opera
50. Håkon Wium Lie CTO, Opera 1999
51. 1998/99
52. 1998/99 released the source code for their browser
53. 1998/99
54. Phoenix 1998/99
55. 2005 Semantic HTML
57. 2005 Semantic HTML
58. .post { background: #FFF; margin: 5px; } 2005 Semantic HTML
59. .post { ... } 2005 Semantic HTML
60. .post { ... } .header { min-height: 50px; } 2005 Semantic HTML
61. .post { ... } .header { ... } 2005 Semantic HTML
62. .post { ... } .header { ... } .photo { } .music { } 2005 Semantic HTML
63. .post { ... } .header { ... } .photo { padding: 0; } .music { padding: 20px; } 2005 Semantic HTML
64. .post { ... } .header { ... } .photo { ... } .music { ... } 2005 Semantic HTML
65. .post { ... } .header { ... } .photo { ... } .music { ... } 2005 Semantic HTML
67. 1996 Language for writing styles 2005 Isolation of styles Lessons learned
68. /* feed.css */ .post { ... } .header { ... } .photo { ... } 2005 Isolation of styles
69. /* feed.css */ .post { ... } .header { ... } .photo { ... } 2005 Isolation of styles /* notification.css */ .notification { ... } .photo { ... }
70. /* feed.css */ .post { ... } .header { ... } .photo { ... } 2005 Isolation of styles /* notification.css */ .notification { ... } .photo { ... } /* common.css */ .photo { ... }
71. /* feed.css */ .post { ... } .header { ... } .photo { ... } 2005 Isolation of styles /* notification.css */ .notification { ... } .photo { ... } /* common.css */ .photo { ... }
72. /* feed.css */ .post { ... } .header { ... } .post .photo {} 2005 Isolation of styles /* notification.css */ .notification { ... } .notification .photo {} /* common.css */ .photo { ... }
73. /* feed.css */ .post { ... } .header { ... } .post .photo {} 2005 Isolation of styles /* notification.css */ .notification { ... } .header { ... } .notification .photo {} /* common.css */ .photo { ... }
74. /* feed.css */ .post { ... } .post .header {} .post .photo {} 2005 Isolation of styles /* notification.css */ .notification { ... } .notification .header{} .notification .photo {} /* common.css */ .photo { ... }
75. 2006 Hampton Catlin Natalie Weizenbaum
76. /* feed.css */ .post { ... } .post .header { ... } .post .photo { ... } 2005 Isolation of styles
77. /* feed.scss */ .post { ... .header { ... } .photo { ... } } 2005 Isolation of styles
78. /* feed.scss */ .post { ... .header { ... } .photo { ... } } 2005 Isolation of styles /* notification.scss */ .notification { ... .header { ... } .photo { ... } }
79. /* feed.css */ .post { ... } .post .header { ... } .post .photo { ... } 2005 Isolation of styles /* notification.css */ .notification { ... } .notification .header { ... } .notification .photo { ... }
80. 2005 Isolation of styles /* feed.scss */ .post { ... .photo { ... } } /* common.css */ .photo { ... }
81. /* common.css */ .photo { ... } 2005 Isolation of styles /* feed.scss */ .post { ... .photo { @extend .photo; ... } }
82. /* common.css */ .photo { ...1 } 2005 Isolation of styles /* feed.scss */ .post { ... .photo { @extend .photo; ...2 } }
83. /* style.css */ .photo { ...1 } 2005 Isolation of styles
84. /* style.css */ .photo, .post .photo { ...1 } 2005 Isolation of styles
85. /* style.css */ .photo, .post .photo { ...1 } .post .photo { ...2} 2005 Isolation of styles
86. /* style.css */ .photo, .post .photo { ...1 } .post .photo { ...2} .post { ... } 2005 Isolation of styles
88. 2007 Max Shirshin Varvara Stepanova
92. 2007 BEM: Block, Elements, Modifiers .post { ... } .post .photo {}
93. .post { ... } .post__photo {} 2007 BEM: Block, Elements, Modifiers
94. /* feed.css */ .post { ... } .post__photo {} /* common.css */ .photo { ... } 2007 BEM: Block, Elements, Modifiers
95. /* feed.css */ .post { ... } .post__header {} .post__photo {} /* notification.css */ .notification { ... } .notification__header{} .notification__photo {} /* common.css */ .photo { ... } 2007 BEM: Block, Elements, Modifiers
96. /* feed.css */ .post { ... } .post__header {} .post__photo {} /* notification.css */ .notification { ... } .notification__header{} .notification__photo {} /* common.css */ .photo { ... } 2007 BEM: Block, Elements, Modifiers
97. 2007 BEM: Block, Elements, Modifiers .button { ... }
98. 2007 BEM: Block, Elements, Modifiers .button { ... } .button--disabled { ... } .button--loading { ... }
99. 1996 Language for writing styles 2005 Isolation of styles 2007 Components Lessons learned
100. 2009 OOCSS Nicole Sullivan
101. /* feed.css */ .post { ... } .post__header {} .post__photo {} /* notification.css */ .notification { ... } .notification__header{} .notification__photo {} /* common.css */ .photo { ... }
102. /* feed.css */ #post { ... } #post__header {} #post__photo {} /* notification.css */ #notification { ... } #notification__header{} #notification__photo {} /* common.css */ #photo { ... }
105. 2009 OOCSS
106. /* buttons.css */ .button { ... } 2009 OOCSS
107. /* buttons.css */ .button { ... } 2009 OOCSS
108. /* buttons.css */ .button { ... } .button.primary { ... } .button.danger { ... } 2009 OOCSS
109. .photo { ... } .post .photo { ... } .post .notifications { ... } 2009 OOCSS
110. .photo { ... } .photo.full { ... } .photo.subtle { ... } 2009 OOCSS
111. 1996 Language for writing styles 2005 Isolation of styles 2007 Components 2011 Co-location Lessons learned
112. Mark Otto Jacob Thornton 2011
115. . - styles - buttons.css - forms.css - feed.css - scripts - form-validation.js - feed-interaction.js 2011 Co-location
116. . - atoms - buttons.css - forms - styles.css - script.js - feed - styles.css - script.js 2011 Co-location
118. html <div class="dropdown"> <a class="dropdown-toggle"/> <ul class="dropdown-menu"> ... </ul> </div> 2011 Co-location
119. js $('.dropdown-toggle').dropdown() html <div class="dropdown"> <a class="dropdown-toggle"/> <ul class="dropdown-menu"> ... </ul> </div> 2011 Co-location
121. SMACSS base, layout, module, theme ... Atomic design atoms, molecules, organisms ... SUITCSS utilities, components, descendents ... ITCSS settings, tools, elements, objects ... 2011 - 2014 Naming things
122. 1996 Language for writing styles 2005 Isolation of styles 2007 Components 2011 Co-location Lessons learned
123. 2013 React
124. 2013 React
125. 2013 React
126. 2013 writing HTML in JS
127. js var Button = React.createElement(); 2013 React
128. js var Button = React.createElement('button', 'Click me'); 2013 React
129. js var Button = React.createElement('button', 'Click me', { class: 'btn' }); 2013 React
130. 2013 React js var Button = React.createElement('button', 'Click me', { class: 'btn' }); React.renderComponent( Button, document.getElementById('root') );
131. html <div id="root"> <button class="btn">Click me</button> </div> 2013 React
132. 2014-15 Steve Carlson
133. Atomic CSS 2014-15
134. html <button class="Bgc(#333) C(#fff)"> Click me </button> 2014-15 Atomic CSS
135. html <button class="Bgc(#333) C(#fff)"> Click me </button> 1993 RRP @BUTTON fo(ba=#333,fo=#fff) 2014-15 Atomic CSS
136. html <button class="Bgc(#333) C(#fff)"> Click me </button> 2014-15 Atomic CSS
137. $ npm install atomizer 2014-15 Atomic CSS
138. $ atomizer -o style.css ./*.html 2014-15 Atomic CSS
139. css .Bgc(#333) { background-color: #333; } .C(#fff) { color: #fff; } 2014-15 Atomic CSS html <button class="Bgc(#333) C(#fff)"> Click me </button>
140. $ atomizer -c config.js -o style.css ./*.html 2014-15 Atomic CSS
141. 2014-15 Atomic CSS html <button class="Bgc(brandColor) C(#fff)"> Click me </button>
142. 2014-15 JS writing CSS
143. Christopher Chedeau @vjeux 2014 React
144. var styles = {} 2014-15 React
145. var styles = { container: { ... } } 2014-15 React
146. var styles = { container: { ... }, button: { backgroundColor: '#333', color: '#fff' } } 2014-15 React
147. var styles = { container: { ... }, button: { backgroundColor: props.disabled ? '#333' : 'grey', color: props.disabled ? '#fff' : 'light-grey' } } 2014-15 React
148. var styles = { container: { ... }, button: { ... } } 2014-15 React
149. var styles = { container: { ... }, button: { ... } } class Button extends React.Component { render () { return <button style={styles.button}>Click me</button>, } } 2014-15 React
150. html <button style="background-color: '#333'; color: #fff"> Click me </button> 2014-15 React
151. 2015 writing HTML + CSS in JS
152. smarter optimisations prop based + critical css by default
153. STOP! SEPARATION OF CONCERN ???
155. sharing components
156. 2014-15 React $ npm install datepicker
157. import Datepicker from 'datepicker' class Button extends React.Component { render () { return <Datepicker onChange={this.onChange}/> } } 2014-15 React
159. html <button style="background-color: '#333'; color: #fff"> Click me </button> 2014-15 React
160. 2015-16
161. Alex Lande Ian Obermiller
162. var styles = { button: { backgroundColor: '#333', color: '#fff' } } 2015 Radium
163. var styles = { button: { backgroundColor: '#333', color: '#fff', ':hover': { backgroundColor: '#777' } } } 2015 Radium
164. var styles = { ... } class Button extends React.Component { render () { return <button style={styles.button}>Click me</button>, } } 2015 Radium
165. var styles = { ... } var Radium = require('radium'); class Button extends React.Component { render () { return <button style={styles.button}>Click me</button>, } } 2015 Radium
166. var styles = { ... } var Radium = require('radium'); @Radium class Button extends React.Component { render () { return <button style={styles.button}>Click me</button>, } } 2015 Radium
167. .babelrc { "plugins": [ "transform-decorators-legacy", "transform-class-properties" ] } 2015 Radium
168. html <button style="background-color: '#333'; color: #fff"> Click me </button> 2015 Radium
169. html <button style="background-color: '#333'; color: #fff"> Click me </button> js $('button').on('mouseover', function () { ... }) 2015 Radium
170. 2015 Glen Maddern Mark Dalgleish
171. We need to follow conventions to stop our styles from clashing. Computers are great at following instructions, humans not so much. - someone
172. components/buttons.css .btn { padding: 10px; font-size: 14px; } .btn-primary { background: blue; color: white; } 2015 CSS-modules
173. js: react <button className="btn btn-primary"> Click me </button> components/buttons.css .btn { padding: 10px; font-size: 14px; } .btn-primary { background: blue; color: white; } 2015 CSS-modules
174. components/buttons.css .btn { ... } .btn-primary { ... } 2015 CSS-modules
175. components/buttons.css .btn { ... } .btn-primary { ... } .btn-secondary { ... } .btn--disabled { ... } .btn--loading { ... } 2015 CSS-modules
176. components/buttons.css .btn { ... } .primary { ... } .secondary { ... } .disabled { ... } .loading { ... } 2015 CSS-modules
177. js: react var styles = require('./components/buttons.css') 2015 CSS-modules
178. js: react var styles = require('./components/buttons.css') <button className={styles.primary}> Click me </button> 2015 CSS-modules
179. html <button class="components_button__primary__abc5436"> Click me </button> 2015 CSS-modules
180. js: angular var styles = require('./components/buttons.css') class MyController { constructor($scope) { $scope.styles = styles; } } 2015 CSS-modules
181. html: angular <button ng-class="{{styles.primary}}"> Click me </button> 2015 CSS-modules
182. html <style> .components_button__primary__abc5436 { ... } <style> <button class="components_button__primary__abc5436"> Click me </button> 2015 CSS-modules
183. . - forms - styles.css - index.js - feed - styles.css - index.js 2015 Co-location
184. . - forms - styles.css - controller.js - template.html - feed - styles.css - controller.js - template.html 2015 Co-location
185. Jamie Wong Emily Eisenberg 2015
186. js var { Stylesheet, css } = require('aphrodite') 2015 Aphrodite
187. js var { Stylesheet, css } = require('aphrodite') var styles = Stylesheet.create({ primary: { backgroundColor: '#333', } }) 2015 Aphrodite
188. js var { Stylesheet, css } = require('aphrodite') var styles = Stylesheet.create({ primary: { backgroundColor: '#333', ':hover' { backgroundColor: '#777' } } }) 2015 Aphrodite
189. js var { Stylesheet, css } = require('aphrodite') var styles = Stylesheet.create({ ... }) 2015 Aphrodite
190. js var { Stylesheet, css } = require('aphrodite') var styles = Stylesheet.create({ ... }) <button className={ css(styles.primary) }> Click me </button> 2015 Aphrodite
191. html <style> .button_abc5436 { ... } <style> <button class="button_abc5436"> Click me </button> 2015 Aphrodite
192. Oleg Slobodskoi 2015
193. 2015 JSS js var className = createStyleSheet({ dropdown: { backgroundColor: '#fff', '&:hover {backgroundColor: '#0c0'} } }).attach()
194. 2015 JSS js var className = createStyleSheet({ dropdown: { backgroundColor: '#fff', '&:hover {backgroundColor: '#0c0'}, '& .toggle' {backgroundColor: '#0e0'} } }).attach()
195. html <style> .dropdown_abc5436 { ... } .dropdown_abc5436 .toggle_uieu33{ ... } <style> <div class="dropdown_abc5436"> <div class="toggle_uieu33"></div> </div> 2015 JSS
196. 2015 Evan you
197. .vue <template> <button>Click me</button> </template> <script> module.exports = { ... } </script> 2015 vue
198. .vue <template> <button>Click me</button> </template> <script> module.exports = { ... } </script> <style> button { ... } <style> 2015 vue
199. .vue <template> <button>Click me</button> </template> <script> module.exports = { ... } </script> <style scoped> button { ... } <style> 2015 vue
200. / 2015
201. Ryan Tsao 2016
202. 2016 Styletron js var Styletron = require('styletron') var className = injectStyle(new Styletron(), { backgroundColor: '#333', fontSize: '18px', ':hover' { backgroundColor: '#777' } })
203. 2016 Styletron
204. 2016 Styletron
205. html <button class="a c"> Click me </button> 2016 Styletron
206. Sunil Pai 2016
207. js var { css } = require('glamor') var className = css({ backgroundColor: '#333', fontSize: '18px', ':hover': { backgroundColor: '#777' } }) 2016 Glamor
208. js var { css } = require('glamor') var className = css` background-color: #333; font-size: 18px; :hover { background-color: #777; } ` 2016 Glamor
209. js var { css } = require('glamor') var className = css`...` class myComponent extends React.Component { render () { } } 2016 Glamor
210. js var { css } = require('glamor') var className = css`...` class myComponent extends React.Component { render () { return <button className={className}>Click me</button> } } 2016 Glamor
211. 2016 Glen Maddern Max Stoiber
212. 2016 styled-components js var styled = require('styled-components') var Button = styled.button` background-color: #333; font-size: 18px; &:hover { background-color: #777; } `
213. js var styled = require('styled-components') var Button = styled.button`...` class myComponent extends React.Component { render () { } } 2016 styled-components
214. js var styled = require('styled-components') var Button = styled.button`...` class myComponent extends React.Component { render () { return <Button>Click me</Button> } } 2016 styled-components
215. js var styled = require('styled-components') var Button = styled.button`...` class myComponent extends React.Component { render () { return <Button disabled>Click me</Button> } } 2016 styled-components
216. js var styled = require('styled-components') var Button = styled.button` background-color: ${props => props.disabled ? '#333': 'grey'}; font-size: 18px; &:hover { background-color: #777; } ` 2016 styled-components
217. html <button class="aejh33"> Click me </button> 2016 styled-components
218. .babelrc { "plugins": [ "babel-plugin-styled-components" ] } 2016 styled-components
219. html <button class="Button-aejh33 aejh33"> Click me </button> 2016 styled-components
221. js var css = require('css-constructor') class Button extends React.Component { @css` background-color: #333; font-size: 18px; &:hover { background-color: #777; } ` } 2016 css-constructor
222. js var css = require('css-constructor') class Button extends React.Component { @css`...` render () { return <button>Click me</button> } } 2016 css-constructor
223. zeit 2016
224. 2016 styled-jsx js class Button extends React.Component { render () { return <button> Click me </button> } }
225. 2016 styled-jsx js class Button extends React.Component { render () { return <button> <style jsx>{` `}</style> Click me </button> }
226. 2016 styled-jsx js class Button extends React.Component { render () { return <button> <style jsx>{` button { background-color: #333 } `}</style> Click me </button> }
227. .babelrc { "plugins": [ "styled-jsx/babel" ] } 2016 styled-jsx
228. Phil Plückthun styled-components 2017
229. css :root { --brand-color: blue; } 2017 css-variables
230. css :root { --brand-color: blue; } button { background: var(--brand-color); } 2017 css-variables
231. css :root { ... } button { ... } 2017 css-variables
232. css :root { ... } button { ... } js getComputedStyle(element).getPropertyValue('--brand-color') element.style.setProperty('--brand-color', 'green'); 2017 css-variables
233. Kye Hohenberger 2017
234. 2017 emotion js var { css } = require('react-emotion') var className = css`...` class myComponent extends React.Component { render () { return <button className={className}>Click me</button> } }
235. .babelrc { "plugins": [ "babel-plugin-emotion" ] } 2017 emotion
236. .babelrc { "plugins": [ "babel-plugin-emotion" ] } 2017 emotion You shouldn’t have to sacrifice runtime performance for good developer experience when writing CSS. emotion minimizes the runtime cost of css-in-js dramatically by parsing your styles with babel and PostCSS.
237. / history
238. Future
239. Future Web components js class Button extends HTMLElement { const shadow = this.attachShadow({ mode: 'open' }) const button = document.createElement('button') button.width = '150' shadow.appendChild(button) } customElements.define('x-button', Button)
242. html <link rel="import" href="myButton.html"> <x-button>Click me</x-button> Future HTML Imports
243. Future Scoped styles html <div> <button>Click me</button> </div> <button>Second button</button>
244. Future Scoped styles html <style> button { background-color: #333 } </style> <div> <button>Click me</button> </div> <button>Second button</button>
245. Future Scoped styles html <div> <style> button { background-color: #333 } </style> <button>Click me</button> </div> <button>Second button</button>
246. Future Scoped styles html <div> <style scoped> button { background-color: #333 } </style> <button>Click me</button> </div> <button>Second button</button>
249. css-in-js
250. @siddharthkp DM is open, say hi!