Tweet
Tweet

Slide 1

Slide 1 text

Brian Hough Co-Creator of ✨polished - and - Sr. Director of Engineering at New Relic

Slide 2

Slide 2 text

Get That CSS Out Of Your JS! A Journey Through CSS-In-JS

Slide 3

Slide 3 text

A Friendly Disclaimer

Slide 4

Slide 4 text

Never Meet Your Heroes Initial Reactions Were…Mixed

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Fake News There Are A Lot Of Myths Out There

Slide 7

Slide 7 text

“These developers must really suck at CSS…” - @armchairdev

Slide 8

Slide 8 text

“Just learn CSS” - @captainobvious

Slide 9

Slide 9 text

“1999 called, they want their inline styles back.” - @10XEngineer

Slide 10

Slide 10 text

-don’t know CSS -hate or don’t want to learn CSS -same thing as inline styles -do not care about separation of concerns -just want to write everything in JavaScript Common Myths About CSS-In-JS

Slide 11

Slide 11 text

MythBusters Well Actually…Is CSS-splaining A Thing?

Slide 12

Slide 12 text

You have to know CSS pretty damn well to build a CSS-In-JS Library. Myth 1: We don’t know CSS

Slide 13

Slide 13 text

Quite to the contrary, our work in CSS-In-JS is to hopefully move the entire CSS platform forward. Myth 2: We Hate CSS

Slide 14

Slide 14 text

This one's on us. It was a poor first attempt. The person responsible has been sacked. Myth 3: It’s just inline styles

Slide 15

Slide 15 text

We do very much! It is all in how you look at it… Myth 4: We don’t care about separation of concerns

Slide 16

Slide 16 text

source: http://speakerdeck.com/didoo/let-there-be-peace-on-css

Slide 17

Slide 17 text

OK…This one may be true. Myth 5: We want to write everything in JavaScript

Slide 18

Slide 18 text

-Portability of components -Portability of styles -Better Handling Critical CSS -Platform-agnostic styling What We Set Out To Accomplish

Slide 19

Slide 19 text

Portability of Components Pour One Out For Scoped Styles

Slide 20

Slide 20 text

Portability Of Components const Button = () => ( Submit );

Slide 21

Slide 21 text

Portability Of Components .my_button { background: purple; color: white; } .my_button:active { background: violet; color: white; }

Slide 22

Slide 22 text

-Manually cut and paste the styles -Manually share and import a file -Require users to have a specific build -Create a CSS Framework How Do We Share This Complete Component?

Slide 23

Slide 23 text

Portability Of Components const Button = styled.button` background: purple; color: white; &:active { background: violet; color: white; } ` const MyButton = () => ( Submit );

Slide 24

Slide 24 text

Portability Of Components const SubmitButton = styled.button` background: green; color: white; &:active { background: darkgreen; color: white; } ` const MySubmitButton = () => ( Submit ); const CancelButton = styled.button` background: red; color: white; &:active { background: maroon; color: white; } ` const MyCancelButton = () => ( Submit );

Slide 25

Slide 25 text

-Third-Party Libraries -Internal Component Libraries -Shared Styles/Style Guides Use Cases

Slide 26

Slide 26 text

This is a lot of unrelated CSS, how does this not get bloated and redundant over time?

Slide 27

Slide 27 text

OOCSS - Nicole Sullivan SMACSS - Jonathan Snook BEM - Yandex We Drew Inspiration from CSS

Slide 28

Slide 28 text

BEM Is Built-In .my_button--submit__active {} Block Element Modifier

Slide 29

Slide 29 text

Our Original Example const BaseButton = styled.button` color: white; &:active { color: white; } ` const SubmitButton = BaseButton.extend` background: green; &:active { background: darkGreen; } ` const CancelButton = BaseButton.extend` background: red; &:active { background: maroon; } `

Slide 30

Slide 30 text

The Resulting Code Submit Cancel .inZBzG { color:white; background:green; } .inZBzG:active { color:white; } .inZBzG:active { background:darkGreen; } .fKdCie { color:white; background:red; } .fKdCie:active { color:white; } .fKdCie:active { background:maroon; }

Slide 31

Slide 31 text

Portability Of Styles You see mixins, We see functions

Slide 32

Slide 32 text

‘Portability of styles’ sounds a lot like ‘portability of components’. What’s the difference?

Slide 33

Slide 33 text

Like SASS Mixins @mixin css-lock($min-size: 1, $max-size: 1.4, $min- width: 20, $max-width: 100, $property: font-size, $unit: rem) { #{$property}: calc(#{$min-size}#{$unit} + (#{$max- size} - #{$min-size}) * ((100vw - #{$min-width} #{$unit}) / (#{$max-width} - #{$min-width}))); @media (max-width: #{$min-width}#{$unit}) { #{$property}: #{$min-size}#{$unit}; } @media (min-width: #{$max-width}#{$unit}) { #{$property}: #{$max-size}#{$unit}; } }

Slide 34

Slide 34 text

It’s Really Just A Function function cssLock(minSize = 1, maxSize = 1.4, minWidth = 20, maxWidth = 100, property: = 'font-size', unit = 'rem') { return { [property]: `calc(${minSize}${unit} + (${maxSize} - $ {minSize}) * ((100vw - ${minWidth}${unit}) / (${maxWidth} - $ {$minWidth})))`, `@media (max-width: ${minWidth}${unit})`: { [property]: `${minSize}${unit}`, } `@media (min-width: ${maxWidth}${unit})`: { [property]: `${maxSize}${unit}`, } } }

Slide 35

Slide 35 text

Now It’s As Easy As… npm install csslock --save import cssLock from 'css-lock'; const FluidContainer = styled.div` ...${cssLock()} `

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Inlining Of Critical CSS All Hail Our PageSpeed Overlords

Slide 38

Slide 38 text

critical CSS - the CSS required to do a first render of a page. It is suggested you inline this CSS in order to improve initial page load times.

Slide 39

Slide 39 text

-Fairly manual process - Requires build tools to automate -Perceived effort outweighs work Why Is This So Hard Right Now?

Slide 40

Slide 40 text

What If It Were As Easy As… import { renderToString } from 'react-dom/server' import { ServerStyleSheet } from 'styled-components' const sheet = new ServerStyleSheet() const html = renderToString(sheet.collectStyles()) const styleTags = sheet.getStyleTags()

Slide 41

Slide 41 text

All components needed to render the initial page on the server are automatically inlined when server rendering.

Slide 42

Slide 42 text

Styles For Every Platform The Holy Grail…Did they ever find that thing?

Slide 43

Slide 43 text

React Primitives import React from 'react'; import { View, Text, Image} from 'react-primitives'; class Foo extends React.Component { render() { return ( {this.props.children} ); } }

Slide 44

Slide 44 text

Styling Primitives import styled from 'styled-components/native'; const StyledView = styled.View` background-color: papayawhip; `; const StyledText = styled.Text` color: palevioletred; `; class MyReactNativeComponent extends React.Component { render() { return ( Hello World! ) } }

Slide 45

Slide 45 text

Styling Primitives const RotatedBox = styled.View` transform: rotate(90deg); text-shadow-offset: 10px 5px; font-variant: small-caps; margin: 5px 7px 2px; `;

Slide 46

Slide 46 text

Delivering on the promise of the same code everywhere, now including styles!

Slide 47

Slide 47 text

Write Once, Render Anywhere Peggy Rayzis @14:40 More On This Later…

Slide 48

Slide 48 text

What’s The Catch? It’s too good to be true

Slide 49

Slide 49 text

-CSS-Like API vs. Smaller Library -No Config Build vs. Better Performance Form vs. Function

Slide 50

Slide 50 text

Form vs. Function emotion by Kye Hohenberger may be the closest, providing a CSS-Like API, tiny library size, and fast performance with minimal build configuration.

Slide 51

Slide 51 text

Security Who knew taking un-sanitized user input and executing it in JavaScript was a bad idea.

Slide 52

Slide 52 text

Security Using CSS-In-JS Securely by James K Nelson http://bit.ly/css-js-security CSS Escape Polyfill by Mathias http://bit.ly/css-escape

Slide 53

Slide 53 text

http://bit.ly/js-styles-perf I’m Sold! Where Do Start? Awesome CSS in JS by Valerii Sorokobatko

Slide 54

Slide 54 text

I’m Sold! Where Do Start? Awesome CSS in JS by Valerii Sorokobatko http://bit.ly/js-styles-perf Unified Styling Language by Mark Dalgleish http://bit.ly/unified-styling-language

Slide 55

Slide 55 text

-CSS Modules -Polymer/Web Components -Webpack CSS Loader -CSS Variables Gross! What are my other options?

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Thank You! Twitter: @b_hough Github: github.com/bhough Polished: polished.js.org