The life of CSS and it's future

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

Ea26ebbe66c3bb6afb5f711cfe766dff?s=128

Siddharth Kshetrapal

October 28, 2017
Tweet

Transcript

  1. 21

  2. Siddharth Kshetrapal

  3. @siddharthkp i make things on the internet

  4. @siddharthkp i make things on the internet

  5. None
  6. css at scale is hard.

  7. css-in-js

  8. None
  9. 1990

  10. None
  11. 1990 Tim Berners-Lee

  12. http://info.cern.ch/hypertext/WWW/TheProject.html

  13. None
  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
  25. None
  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

  31. 1996

  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. ?

  35. None
  36. None
  37. None
  38. None
  39. None
  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

  56. None
  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
  66. None
  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
  87. 2007

  88. 2007 Max Shirshin Varvara Stepanova

  89. None
  90. None
  91. None
  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 { ... }
  103. None
  104. None
  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

  113. 2011

  114. None
  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
  117. 2011

  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
  120. None
  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 ???

  154. None
  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
  158. None
  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

  220. None
  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)
  240. 2017

  241. 2017

  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>
  247. None
  248. None
  249. css-in-js

  250. @siddharthkp DM is open, say hi!