Slide 1

Slide 1 text

Slide 2

Slide 2 text

Siddharth Kshetrapal

Slide 3

Slide 3 text

@siddharthkp i make things on the internet

Slide 4

Slide 4 text

@siddharthkp i make things on the internet

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

css at scale is hard.

Slide 7

Slide 7 text

css-in-js

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

1990

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

1990 Tim Berners-Lee

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

1990

Slide 15

Slide 15 text

Hello

1990

Slide 16

Slide 16 text

Hello

1990

Slide 17

Slide 17 text

1993 Robert Raisch 1st proposal for HTML stylesheets

Slide 18

Slide 18 text

@H1 fo(fa=he,si=18,we=bo)

Hello

1993 RRP

Slide 19

Slide 19 text

@H1 fo(fa=he,si=18,we=bo) @P co(nu=3,wi=80)

Hello

1993 RRP

Slide 20

Slide 20 text

1994 Håkon Wium Lie

Slide 21

Slide 21 text

1994 Cascading HTML style sheets

Slide 22

Slide 22 text

h1.font.size = 24pt 100%

Hello

1994 Cascading HTML style sheets

Slide 23

Slide 23 text

h1.font.size = 24pt 100% h2.font.size = 20pt 40%

Hello

1994 Cascading HTML style sheets

Slide 24

Slide 24 text

h1.font.size = 24pt 100% h2.font.size = 20pt 40% h2.font.size = 24pt 60%

Hello

1994 Cascading HTML style sheets

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

1994 Bert Bos

Slide 27

Slide 27 text

! *H1.size = 2 *H1.slant = true

Hello

1994 Stream-based style sheets

Slide 28

Slide 28 text

1995 April WWW3, Germany

Slide 29

Slide 29 text

1995 Dave Raggett

Slide 30

Slide 30 text

1996 Language for writing styles Lessons learned

Slide 31

Slide 31 text

1996

Slide 32

Slide 32 text

1996 Language for writing styles

Hello

Slide 33

Slide 33 text

1996 Language for writing styles

Hello

/* style.css */ h1 { font-family: 'Arial'; color: '#333'; }

Slide 34

Slide 34 text

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

Brendan Eich

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

1997 CSS-in-JS

Slide 44

Slide 44 text

1997 W3C created a CSS working group Chris Lilley

Slide 45

Slide 45 text

1998 CSS 2 css h1 { position: absolute; }

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

1998 Opera

Slide 49

Slide 49 text

1998 Opera

Slide 50

Slide 50 text

Håkon Wium Lie CTO, Opera 1999

Slide 51

Slide 51 text

1998/99

Slide 52

Slide 52 text

1998/99 released the source code for their browser

Slide 53

Slide 53 text

1998/99

Slide 54

Slide 54 text

Phoenix 1998/99

Slide 55

Slide 55 text

2005 Semantic HTML

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

2005 Semantic HTML

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

.post { ... } 2005 Semantic HTML

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

1996 Language for writing styles 2005 Isolation of styles Lessons learned

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

2006 Hampton Catlin Natalie Weizenbaum

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

2007

Slide 88

Slide 88 text

2007 Max Shirshin Varvara Stepanova

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

2009 OOCSS Nicole Sullivan

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

2009 OOCSS

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

Mark Otto Jacob Thornton 2011

Slide 113

Slide 113 text

2011

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

2011

Slide 118

Slide 118 text

html

...

2011 Co-location

Slide 119

Slide 119 text

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

...

2011 Co-location

Slide 120

Slide 120 text

No content

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

2013 React

Slide 124

Slide 124 text

2013 React

Slide 125

Slide 125 text

2013 React

Slide 126

Slide 126 text

2013 writing HTML in JS

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

html

Click me

2013 React

Slide 132

Slide 132 text

2014-15 Steve Carlson

Slide 133

Slide 133 text

Atomic CSS 2014-15

Slide 134

Slide 134 text

html Click me 2014-15 Atomic CSS

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

html Click me 2014-15 Atomic CSS

Slide 137

Slide 137 text

$ npm install atomizer 2014-15 Atomic CSS

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

2014-15 Atomic CSS html Click me

Slide 142

Slide 142 text

2014-15 JS writing CSS

Slide 143

Slide 143 text

Christopher Chedeau @vjeux 2014 React

Slide 144

Slide 144 text

var styles = {} 2014-15 React

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

html Click me 2014-15 React

Slide 151

Slide 151 text

2015 writing HTML + CSS in JS

Slide 152

Slide 152 text

smarter optimisations prop based + critical css by default

Slide 153

Slide 153 text

STOP! SEPARATION OF CONCERN ???

Slide 154

Slide 154 text

No content

Slide 155

Slide 155 text

sharing components

Slide 156

Slide 156 text

2014-15 React $ npm install datepicker

Slide 157

Slide 157 text

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

Slide 158

Slide 158 text

No content

Slide 159

Slide 159 text

html Click me 2014-15 React

Slide 160

Slide 160 text

2015-16

Slide 161

Slide 161 text

Alex Lande Ian Obermiller

Slide 162

Slide 162 text

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

Slide 163

Slide 163 text

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

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

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

Slide 166

Slide 166 text

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

Slide 167

Slide 167 text

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

Slide 168

Slide 168 text

html Click me 2015 Radium

Slide 169

Slide 169 text

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

Slide 170

Slide 170 text

2015 Glen Maddern Mark Dalgleish

Slide 171

Slide 171 text

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

Slide 172

Slide 172 text

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

Slide 173

Slide 173 text

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

Slide 174

Slide 174 text

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

Slide 175

Slide 175 text

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

Slide 176

Slide 176 text

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

Slide 177

Slide 177 text

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

Slide 178

Slide 178 text

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

Slide 179

Slide 179 text

html Click me 2015 CSS-modules

Slide 180

Slide 180 text

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

Slide 181

Slide 181 text

html: angular Click me 2015 CSS-modules

Slide 182

Slide 182 text

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

Slide 183

Slide 183 text

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

Slide 184

Slide 184 text

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

Slide 185

Slide 185 text

Jamie Wong Emily Eisenberg 2015

Slide 186

Slide 186 text

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

Slide 187

Slide 187 text

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

Slide 188

Slide 188 text

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

Slide 189

Slide 189 text

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

Slide 190

Slide 190 text

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

Slide 191

Slide 191 text

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

Slide 192

Slide 192 text

Oleg Slobodskoi 2015

Slide 193

Slide 193 text

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

Slide 194

Slide 194 text

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

Slide 195

Slide 195 text

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

Slide 196

Slide 196 text

2015 Evan you

Slide 197

Slide 197 text

.vue Click me module.exports = { ... } 2015 vue

Slide 198

Slide 198 text

.vue Click me module.exports = { ... } button { ... } <style> 2015 vue

Slide 199

Slide 199 text

.vue Click me module.exports = { ... } button { ... } <style> 2015 vue

Slide 200

Slide 200 text

/ 2015

Slide 201

Slide 201 text

Ryan Tsao 2016

Slide 202

Slide 202 text

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

Slide 203

Slide 203 text

2016 Styletron

Slide 204

Slide 204 text

2016 Styletron

Slide 205

Slide 205 text

html Click me 2016 Styletron

Slide 206

Slide 206 text

Sunil Pai 2016

Slide 207

Slide 207 text

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

Slide 208

Slide 208 text

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

Slide 209

Slide 209 text

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

Slide 210

Slide 210 text

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

Slide 211

Slide 211 text

2016 Glen Maddern Max Stoiber

Slide 212

Slide 212 text

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

Slide 213

Slide 213 text

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

Slide 214

Slide 214 text

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

Slide 215

Slide 215 text

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

Slide 216

Slide 216 text

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

Slide 217

Slide 217 text

html Click me 2016 styled-components

Slide 218

Slide 218 text

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

Slide 219

Slide 219 text

html Click me 2016 styled-components

Slide 220

Slide 220 text

No content

Slide 221

Slide 221 text

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

Slide 222

Slide 222 text

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

Slide 223

Slide 223 text

zeit 2016

Slide 224

Slide 224 text

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

Slide 225

Slide 225 text

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

Slide 226

Slide 226 text

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

Slide 227

Slide 227 text

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

Slide 228

Slide 228 text

Phil Plückthun styled-components 2017

Slide 229

Slide 229 text

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

Slide 230

Slide 230 text

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

Slide 231

Slide 231 text

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

Slide 232

Slide 232 text

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

Slide 233

Slide 233 text

Kye Hohenberger 2017

Slide 234

Slide 234 text

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

Slide 235

Slide 235 text

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

Slide 236

Slide 236 text

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

Slide 237

Slide 237 text

/ history

Slide 238

Slide 238 text

Future

Slide 239

Slide 239 text

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)