Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Siddharth Kshetrapal

October 28, 2017
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Technology

Transcript

  1. Siddharth Kshetrapal

    View full-size slide

  2. @siddharthkp
    i make things on the internet

    View full-size slide

  3. @siddharthkp
    i make things on the internet

    View full-size slide

  4. css at scale
    is hard.

    View full-size slide

  5. 1990 Tim Berners-Lee

    View full-size slide

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

    View full-size slide

  7. 1993
    Robert Raisch
    1st proposal for
    HTML stylesheets

    View full-size slide

  8. @H1 fo(fa=he,si=18,we=bo)
    Hello
    1993 RRP

    View full-size slide

  9. @H1 fo(fa=he,si=18,we=bo)
    @P co(nu=3,wi=80)
    Hello
    1993 RRP

    View full-size slide

  10. 1994
    Håkon Wium Lie

    View full-size slide

  11. 1994 Cascading HTML style sheets

    View full-size slide

  12. h1.font.size = 24pt 100%
    Hello
    1994 Cascading HTML style sheets

    View full-size slide

  13. h1.font.size = 24pt 100%
    h2.font.size = 20pt 40%
    Hello
    1994 Cascading HTML style sheets

    View full-size slide

  14. h1.font.size = 24pt 100%
    h2.font.size = 20pt 40%
    h2.font.size = 24pt 60%
    Hello
    1994 Cascading HTML style sheets

    View full-size slide

  15. 1994
    Bert Bos

    View full-size slide

  16. !
    *H1.size = 2
    *H1.slant = true
    Hello
    1994 Stream-based style sheets

    View full-size slide

  17. 1995 April WWW3, Germany

    View full-size slide

  18. 1995 Dave Raggett

    View full-size slide

  19. 1996 Language for writing styles
    Lessons learned

    View full-size slide

  20. 1996 Language for writing styles

    Hello

    View full-size slide

  21. 1996 Language for writing styles
    Hello
    /* style.css */
    h1 {
    font-family: 'Arial';
    color: '#333';
    }

    View full-size slide

  22. Brendan Eich

    View full-size slide

  23. 1997 JSSS: Javascript Stylesheets
    css
    h1 {
    font-family: 'Arial';
    color: '#333';
    }

    View full-size slide

  24. js
    document.tags.H1.fontSize = 'Arial';
    document.tags.H1.color = '#333';
    1997 JSSS: Javascript Stylesheets
    css
    h1 {
    font-family: 'Arial';
    color: '#333';
    }

    View full-size slide

  25. 1997 CSS-in-JS

    View full-size slide

  26. 1997 W3C created a CSS working group
    Chris Lilley

    View full-size slide

  27. 1998 CSS 2
    css
    h1 {
    position: absolute;
    }

    View full-size slide

  28. css
    h1 {
    position: absolute;
    z-index: 99999999;
    }
    1998 CSS 2

    View full-size slide

  29. 1998 CSS 2
    css
    h1 {
    position: absolute;
    z-index: 99999999;
    }
    @media screen and (min-width: 480px) {
    h1 { padding: 1rem 3rem; }
    }

    View full-size slide

  30. Håkon Wium Lie
    CTO, Opera
    1999

    View full-size slide

  31. 1998/99
    released the source code for their browser

    View full-size slide

  32. Phoenix
    1998/99

    View full-size slide

  33. 2005 Semantic HTML

    View full-size slide

  34. 2005 Semantic HTML

    View full-size slide

  35. .post {
    background: #FFF;
    margin: 5px;
    }
    2005 Semantic HTML

    View full-size slide

  36. .post { ... }
    2005 Semantic HTML

    View full-size slide

  37. .post { ... }
    .header {
    min-height: 50px;
    }
    2005 Semantic HTML

    View full-size slide

  38. .post { ... }
    .header { ... }
    2005 Semantic HTML

    View full-size slide

  39. .post { ... }
    .header { ... }
    .photo {
    }
    .music {
    }
    2005 Semantic HTML

    View full-size slide

  40. .post { ... }
    .header { ... }
    .photo {
    padding: 0;
    }
    .music {
    padding: 20px;
    }
    2005 Semantic HTML

    View full-size slide

  41. .post { ... }
    .header { ... }
    .photo { ... }
    .music { ... }
    2005 Semantic HTML

    View full-size slide

  42. .post { ... }
    .header { ... }
    .photo { ... }
    .music { ... }
    2005 Semantic HTML

    View full-size slide

  43. 1996 Language for writing styles
    2005 Isolation of styles
    Lessons learned

    View full-size slide

  44. /* feed.css */
    .post { ... }
    .header { ... }
    .photo { ... }
    2005 Isolation of styles

    View full-size slide

  45. /* feed.css */
    .post { ... }
    .header { ... }
    .photo { ... }
    2005 Isolation of styles
    /* notification.css */
    .notification { ... }
    .photo { ... }

    View full-size slide

  46. /* feed.css */
    .post { ... }
    .header { ... }
    .photo { ... }
    2005 Isolation of styles
    /* notification.css */
    .notification { ... }
    .photo { ... }
    /* common.css */
    .photo { ... }

    View full-size slide

  47. /* feed.css */
    .post { ... }
    .header { ... }
    .photo { ... }
    2005 Isolation of styles
    /* notification.css */
    .notification { ... }
    .photo { ... }
    /* common.css */
    .photo { ... }

    View full-size slide

  48. /* feed.css */
    .post { ... }
    .header { ... }
    .post .photo {}
    2005 Isolation of styles
    /* notification.css */
    .notification { ... }
    .notification .photo {}
    /* common.css */
    .photo { ... }

    View full-size slide

  49. /* feed.css */
    .post { ... }
    .header { ... }
    .post .photo {}
    2005 Isolation of styles
    /* notification.css */
    .notification { ... }
    .header { ... }
    .notification .photo {}
    /* common.css */
    .photo { ... }

    View full-size slide

  50. /* feed.css */
    .post { ... }
    .post .header {}
    .post .photo {}
    2005 Isolation of styles
    /* notification.css */
    .notification { ... }
    .notification .header{}
    .notification .photo {}
    /* common.css */
    .photo { ... }

    View full-size slide

  51. 2006
    Hampton
    Catlin
    Natalie
    Weizenbaum

    View full-size slide

  52. /* feed.css */
    .post { ... }
    .post .header { ... }
    .post .photo { ... }
    2005 Isolation of styles

    View full-size slide

  53. /* feed.scss */
    .post {
    ...
    .header { ... }
    .photo { ... }
    }
    2005 Isolation of styles

    View full-size slide

  54. /* feed.scss */
    .post {
    ...
    .header { ... }
    .photo { ... }
    }
    2005 Isolation of styles
    /* notification.scss */
    .notification {
    ...
    .header { ... }
    .photo { ... }
    }

    View full-size slide

  55. /* feed.css */
    .post { ... }
    .post .header { ... }
    .post .photo { ... }
    2005 Isolation of styles
    /* notification.css */
    .notification { ... }
    .notification .header { ... }
    .notification .photo { ... }

    View full-size slide

  56. 2005 Isolation of styles
    /* feed.scss */
    .post {
    ...
    .photo { ... }
    }
    /* common.css */
    .photo { ... }

    View full-size slide

  57. /* common.css */
    .photo { ... }
    2005 Isolation of styles
    /* feed.scss */
    .post {
    ...
    .photo {
    @extend .photo;
    ...
    }
    }

    View full-size slide

  58. /* common.css */
    .photo { ...1 }
    2005 Isolation of styles
    /* feed.scss */
    .post {
    ...
    .photo {
    @extend .photo;
    ...2
    }
    }

    View full-size slide

  59. /* style.css */
    .photo { ...1 }
    2005 Isolation of styles

    View full-size slide

  60. /* style.css */
    .photo, .post .photo { ...1 }
    2005 Isolation of styles

    View full-size slide

  61. /* style.css */
    .photo, .post .photo { ...1 }
    .post .photo { ...2}
    2005 Isolation of styles

    View full-size slide

  62. /* style.css */
    .photo, .post .photo { ...1 }
    .post .photo { ...2}
    .post { ... }
    2005 Isolation of styles

    View full-size slide

  63. 2007 Max
    Shirshin
    Varvara
    Stepanova

    View full-size slide

  64. 2007 BEM: Block, Elements, Modifiers
    .post { ... }
    .post .photo {}

    View full-size slide

  65. .post { ... }
    .post__photo {}
    2007 BEM: Block, Elements, Modifiers

    View full-size slide

  66. /* feed.css */
    .post { ... }
    .post__photo {}
    /* common.css */
    .photo { ... }
    2007 BEM: Block, Elements, Modifiers

    View full-size slide

  67. /* feed.css */
    .post { ... }
    .post__header {}
    .post__photo {}
    /* notification.css */
    .notification { ... }
    .notification__header{}
    .notification__photo {}
    /* common.css */
    .photo { ... }
    2007 BEM: Block, Elements, Modifiers

    View full-size slide

  68. /* feed.css */
    .post { ... }
    .post__header {}
    .post__photo {}
    /* notification.css */
    .notification { ... }
    .notification__header{}
    .notification__photo {}
    /* common.css */
    .photo { ... }
    2007 BEM: Block, Elements, Modifiers

    View full-size slide

  69. 2007 BEM: Block, Elements, Modifiers
    .button { ... }

    View full-size slide

  70. 2007 BEM: Block, Elements, Modifiers
    .button { ... }
    .button--disabled { ... }
    .button--loading { ... }

    View full-size slide

  71. 1996 Language for writing styles
    2005 Isolation of styles
    2007 Components
    Lessons learned

    View full-size slide

  72. 2009
    OOCSS
    Nicole Sullivan

    View full-size slide

  73. /* feed.css */
    .post { ... }
    .post__header {}
    .post__photo {}
    /* notification.css */
    .notification { ... }
    .notification__header{}
    .notification__photo {}
    /* common.css */
    .photo { ... }

    View full-size slide

  74. /* feed.css */
    #post { ... }
    #post__header {}
    #post__photo {}
    /* notification.css */
    #notification { ... }
    #notification__header{}
    #notification__photo {}
    /* common.css */
    #photo { ... }

    View full-size slide

  75. /* buttons.css */
    .button { ... }
    2009 OOCSS

    View full-size slide

  76. /* buttons.css */
    .button { ... }
    2009 OOCSS

    View full-size slide

  77. /* buttons.css */
    .button { ... }
    .button.primary { ... }
    .button.danger { ... }
    2009 OOCSS

    View full-size slide

  78. .photo { ... }
    .post .photo { ... }
    .post .notifications { ... }
    2009 OOCSS

    View full-size slide

  79. .photo { ... }
    .photo.full { ... }
    .photo.subtle { ... }
    2009 OOCSS

    View full-size slide

  80. 1996 Language for writing styles
    2005 Isolation of styles
    2007 Components
    2011 Co-location
    Lessons learned

    View full-size slide

  81. Mark
    Otto
    Jacob
    Thornton
    2011

    View full-size slide

  82. .
    - styles
    - buttons.css
    - forms.css
    - feed.css
    - scripts
    - form-validation.js
    - feed-interaction.js
    2011 Co-location

    View full-size slide

  83. .
    - atoms
    - buttons.css
    - forms
    - styles.css
    - script.js
    - feed
    - styles.css
    - script.js
    2011 Co-location

    View full-size slide

  84. html



    ...


    2011 Co-location

    View full-size slide

  85. js
    $('.dropdown-toggle').dropdown()
    html



    ...


    2011 Co-location

    View full-size slide

  86. SMACSS base, layout, module, theme ...
    Atomic design atoms, molecules, organisms ...
    SUITCSS utilities, components, descendents ...
    ITCSS settings, tools, elements, objects ...
    2011 - 2014 Naming things

    View full-size slide

  87. 1996 Language for writing styles
    2005 Isolation of styles
    2007 Components
    2011 Co-location
    Lessons learned

    View full-size slide

  88. 2013 writing HTML in JS

    View full-size slide

  89. js
    var Button = React.createElement();
    2013 React

    View full-size slide

  90. js
    var Button = React.createElement('button', 'Click me');
    2013 React

    View full-size slide

  91. js
    var Button = React.createElement('button', 'Click me', {
    class: 'btn'
    });
    2013 React

    View full-size slide

  92. 2013 React
    js
    var Button = React.createElement('button', 'Click me', {
    class: 'btn'
    });
    React.renderComponent(
    Button,
    document.getElementById('root')
    );

    View full-size slide

  93. html

    Click me

    2013 React

    View full-size slide

  94. 2014-15
    Steve Carlson

    View full-size slide

  95. Atomic CSS
    2014-15

    View full-size slide

  96. html

    Click me

    2014-15 Atomic CSS

    View full-size slide

  97. html

    Click me

    1993 RRP
    @BUTTON fo(ba=#333,fo=#fff)
    2014-15 Atomic CSS

    View full-size slide

  98. html

    Click me

    2014-15 Atomic CSS

    View full-size slide

  99. $ npm install atomizer
    2014-15 Atomic CSS

    View full-size slide

  100. $ atomizer -o style.css ./*.html
    2014-15 Atomic CSS

    View full-size slide

  101. css
    .Bgc(#333) {
    background-color: #333;
    }
    .C(#fff) {
    color: #fff;
    }
    2014-15 Atomic CSS
    html

    Click me

    View full-size slide

  102. $ atomizer -c config.js -o style.css ./*.html
    2014-15 Atomic CSS

    View full-size slide

  103. 2014-15 Atomic CSS
    html

    Click me

    View full-size slide

  104. 2014-15 JS writing CSS

    View full-size slide

  105. Christopher
    Chedeau
    @vjeux
    2014 React

    View full-size slide

  106. var styles = {}
    2014-15 React

    View full-size slide

  107. var styles = {
    container: { ... }
    }
    2014-15 React

    View full-size slide

  108. var styles = {
    container: { ... },
    button: {
    backgroundColor: '#333',
    color: '#fff'
    }
    }
    2014-15 React

    View full-size slide

  109. var styles = {
    container: { ... },
    button: {
    backgroundColor: props.disabled ? '#333' : 'grey',
    color: props.disabled ? '#fff' : 'light-grey'
    }
    }
    2014-15 React

    View full-size slide

  110. var styles = {
    container: { ... },
    button: { ... }
    }
    2014-15 React

    View full-size slide

  111. var styles = {
    container: { ... },
    button: { ... }
    }
    class Button extends React.Component {
    render () {
    return Click me,
    }
    }
    2014-15 React

    View full-size slide

  112. html

    Click me

    2014-15 React

    View full-size slide

  113. 2015 writing HTML + CSS in JS

    View full-size slide

  114. smarter optimisations
    prop based + critical css by default

    View full-size slide

  115. STOP!
    SEPARATION
    OF CONCERN ???

    View full-size slide

  116. sharing components

    View full-size slide

  117. 2014-15 React
    $ npm install datepicker

    View full-size slide

  118. import Datepicker from 'datepicker'
    class Button extends React.Component {
    render () {
    return
    }
    }
    2014-15 React

    View full-size slide

  119. html

    Click me

    2014-15 React

    View full-size slide

  120. Alex Lande Ian Obermiller

    View full-size slide

  121. var styles = {
    button: {
    backgroundColor: '#333',
    color: '#fff'
    }
    }
    2015 Radium

    View full-size slide

  122. var styles = {
    button: {
    backgroundColor: '#333',
    color: '#fff',
    ':hover': {
    backgroundColor: '#777'
    }
    }
    }
    2015 Radium

    View full-size slide

  123. var styles = { ... }
    class Button extends React.Component {
    render () {
    return Click me,
    }
    }
    2015 Radium

    View full-size slide

  124. var styles = { ... }
    var Radium = require('radium');
    class Button extends React.Component {
    render () {
    return Click me,
    }
    }
    2015 Radium

    View full-size slide

  125. var styles = { ... }
    var Radium = require('radium');
    @Radium
    class Button extends React.Component {
    render () {
    return Click me,
    }
    }
    2015 Radium

    View full-size slide

  126. .babelrc
    {
    "plugins": [
    "transform-decorators-legacy",
    "transform-class-properties"
    ]
    }
    2015 Radium

    View full-size slide

  127. html

    Click me

    2015 Radium

    View full-size slide

  128. html

    Click me

    js
    $('button').on('mouseover', function () { ... })
    2015 Radium

    View full-size slide

  129. 2015
    Glen Maddern Mark Dalgleish

    View full-size slide

  130. We need to follow conventions to stop our styles from clashing.
    Computers are great at following instructions, humans not so much.
    - someone

    View full-size slide

  131. components/buttons.css
    .btn {
    padding: 10px;
    font-size: 14px;
    }
    .btn-primary {
    background: blue;
    color: white;
    }
    2015 CSS-modules

    View full-size slide

  132. js: react

    Click me

    components/buttons.css
    .btn {
    padding: 10px;
    font-size: 14px;
    }
    .btn-primary {
    background: blue;
    color: white;
    }
    2015 CSS-modules

    View full-size slide

  133. components/buttons.css
    .btn { ... }
    .btn-primary { ... }
    2015 CSS-modules

    View full-size slide

  134. components/buttons.css
    .btn { ... }
    .btn-primary { ... }
    .btn-secondary { ... }
    .btn--disabled { ... }
    .btn--loading { ... }
    2015 CSS-modules

    View full-size slide

  135. components/buttons.css
    .btn { ... }
    .primary { ... }
    .secondary { ... }
    .disabled { ... }
    .loading { ... }
    2015 CSS-modules

    View full-size slide

  136. js: react
    var styles = require('./components/buttons.css')
    2015 CSS-modules

    View full-size slide

  137. js: react
    var styles = require('./components/buttons.css')

    Click me

    2015 CSS-modules

    View full-size slide

  138. html

    Click me

    2015 CSS-modules

    View full-size slide

  139. js: angular
    var styles = require('./components/buttons.css')
    class MyController {
    constructor($scope) {
    $scope.styles = styles;
    }
    }
    2015 CSS-modules

    View full-size slide

  140. html: angular

    Click me

    2015 CSS-modules

    View full-size slide

  141. html
    <br/>.components_button__primary__abc5436 { ... }<br/><style><br/><button class="components_button__primary__abc5436"><br/>Click me<br/></button><br/>2015 CSS-modules<br/>

    View full-size slide

  142. .
    - forms
    - styles.css
    - index.js
    - feed
    - styles.css
    - index.js
    2015 Co-location

    View full-size slide

  143. .
    - forms
    - styles.css
    - controller.js
    - template.html
    - feed
    - styles.css
    - controller.js
    - template.html
    2015 Co-location

    View full-size slide

  144. Jamie Wong Emily Eisenberg
    2015

    View full-size slide

  145. js
    var { Stylesheet, css } = require('aphrodite')
    2015 Aphrodite

    View full-size slide

  146. js
    var { Stylesheet, css } = require('aphrodite')
    var styles = Stylesheet.create({
    primary: {
    backgroundColor: '#333',
    }
    })
    2015 Aphrodite

    View full-size slide

  147. js
    var { Stylesheet, css } = require('aphrodite')
    var styles = Stylesheet.create({
    primary: {
    backgroundColor: '#333',
    ':hover' { backgroundColor: '#777' }
    }
    })
    2015 Aphrodite

    View full-size slide

  148. js
    var { Stylesheet, css } = require('aphrodite')
    var styles = Stylesheet.create({ ... })
    2015 Aphrodite

    View full-size slide

  149. js
    var { Stylesheet, css } = require('aphrodite')
    var styles = Stylesheet.create({ ... })

    Click me

    2015 Aphrodite

    View full-size slide

  150. html
    <br/>.button_abc5436 { ... }<br/><style><br/><button class="button_abc5436"><br/>Click me<br/></button><br/>2015 Aphrodite<br/>

    View full-size slide

  151. Oleg Slobodskoi
    2015

    View full-size slide

  152. 2015 JSS
    js
    var className = createStyleSheet({
    dropdown: {
    backgroundColor: '#fff',
    '&:hover {backgroundColor: '#0c0'}
    }
    }).attach()

    View full-size slide

  153. 2015 JSS
    js
    var className = createStyleSheet({
    dropdown: {
    backgroundColor: '#fff',
    '&:hover {backgroundColor: '#0c0'},
    '& .toggle' {backgroundColor: '#0e0'}
    }
    }).attach()

    View full-size slide

  154. html
    <br/>.dropdown_abc5436 { ... }<br/>.dropdown_abc5436 .toggle_uieu33{ ... }<br/><style><br/><div class="dropdown_abc5436"><br/><div class="toggle_uieu33"></div><br/></div><br/>2015 JSS<br/>

    View full-size slide

  155. 2015
    Evan you

    View full-size slide

  156. .vue

    Click me

    <br/>module.exports = { ... }<br/>
    2015 vue

    View full-size slide

  157. .vue

    Click me

    <br/>module.exports = { ... }<br/>
    <br/>button { ... }<br/><style><br/>2015 vue<br/>

    View full-size slide

  158. .vue

    Click me

    <br/>module.exports = { ... }<br/>
    <br/>button { ... }<br/><style><br/>2015 vue<br/>

    View full-size slide

  159. Ryan Tsao
    2016

    View full-size slide

  160. 2016 Styletron
    js
    var Styletron = require('styletron')
    var className = injectStyle(new Styletron(), {
    backgroundColor: '#333',
    fontSize: '18px',
    ':hover' { backgroundColor: '#777' }
    })

    View full-size slide

  161. 2016 Styletron

    View full-size slide

  162. 2016 Styletron

    View full-size slide

  163. html

    Click me

    2016 Styletron

    View full-size slide

  164. Sunil Pai
    2016

    View full-size slide

  165. js
    var { css } = require('glamor')
    var className = css({
    backgroundColor: '#333',
    fontSize: '18px',
    ':hover': { backgroundColor: '#777' }
    })
    2016 Glamor

    View full-size slide

  166. js
    var { css } = require('glamor')
    var className = css`
    background-color: #333;
    font-size: 18px;
    :hover { background-color: #777; }
    `
    2016 Glamor

    View full-size slide

  167. js
    var { css } = require('glamor')
    var className = css`...`
    class myComponent extends React.Component {
    render () {
    }
    }
    2016 Glamor

    View full-size slide

  168. js
    var { css } = require('glamor')
    var className = css`...`
    class myComponent extends React.Component {
    render () {
    return Click me
    }
    }
    2016 Glamor

    View full-size slide

  169. 2016
    Glen Maddern Max Stoiber

    View full-size slide

  170. 2016 styled-components
    js
    var styled = require('styled-components')
    var Button = styled.button`
    background-color: #333;
    font-size: 18px;
    &:hover { background-color: #777; }
    `

    View full-size slide

  171. js
    var styled = require('styled-components')
    var Button = styled.button`...`
    class myComponent extends React.Component {
    render () {
    }
    }
    2016 styled-components

    View full-size slide

  172. js
    var styled = require('styled-components')
    var Button = styled.button`...`
    class myComponent extends React.Component {
    render () {
    return Click me
    }
    }
    2016 styled-components

    View full-size slide

  173. js
    var styled = require('styled-components')
    var Button = styled.button`...`
    class myComponent extends React.Component {
    render () {
    return Click me
    }
    }
    2016 styled-components

    View full-size slide

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

    View full-size slide

  175. html

    Click me

    2016 styled-components

    View full-size slide

  176. .babelrc
    {
    "plugins": [
    "babel-plugin-styled-components"
    ]
    }
    2016 styled-components

    View full-size slide

  177. html

    Click me

    2016 styled-components

    View full-size slide

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

    View full-size slide

  179. js
    var css = require('css-constructor')
    class Button extends React.Component {
    @css`...`
    render () {
    return Click me
    }
    }
    2016 css-constructor

    View full-size slide

  180. 2016 styled-jsx
    js
    class Button extends React.Component {
    render () {
    return
    Click me

    }
    }

    View full-size slide

  181. 2016 styled-jsx
    js
    class Button extends React.Component {
    render () {
    return
    {`<br/>`}
    Click me

    }

    View full-size slide

  182. 2016 styled-jsx
    js
    class Button extends React.Component {
    render () {
    return
    {`<br/>button { background-color: #333 }<br/>`}
    Click me

    }

    View full-size slide

  183. .babelrc
    {
    "plugins": [
    "styled-jsx/babel"
    ]
    }
    2016 styled-jsx

    View full-size slide

  184. Phil Plückthun
    styled-components
    2017

    View full-size slide

  185. css
    :root {
    --brand-color: blue;
    }
    2017 css-variables

    View full-size slide

  186. css
    :root {
    --brand-color: blue;
    }
    button {
    background: var(--brand-color);
    }
    2017 css-variables

    View full-size slide

  187. css
    :root { ... }
    button { ... }
    2017 css-variables

    View full-size slide

  188. css
    :root { ... }
    button { ... }
    js
    getComputedStyle(element).getPropertyValue('--brand-color')
    element.style.setProperty('--brand-color', 'green');
    2017 css-variables

    View full-size slide

  189. Kye Hohenberger
    2017

    View full-size slide

  190. 2017 emotion
    js
    var { css } = require('react-emotion')
    var className = css`...`
    class myComponent extends React.Component {
    render () {
    return Click me
    }
    }

    View full-size slide

  191. .babelrc
    {
    "plugins": [ "babel-plugin-emotion" ]
    }
    2017 emotion

    View full-size slide

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

    View full-size slide

  193. 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)

    View full-size slide

  194. html

    Click me
    Future HTML Imports

    View full-size slide

  195. Future Scoped styles
    html

    Click me

    Second button

    View full-size slide

  196. Future Scoped styles
    html
    <br/>button { background-color: #333 }<br/>

    Click me

    Second button

    View full-size slide

  197. Future Scoped styles
    html

    <br/>button { background-color: #333 }<br/>
    Click me

    Second button

    View full-size slide

  198. Future Scoped styles
    html

    <br/>button { background-color: #333 }<br/>
    Click me

    Second button

    View full-size slide

  199. @siddharthkp
    DM is open, say hi!

    View full-size slide