CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet....
Transcript of CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet....
![Page 1: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/1.jpg)
CSS-in-JSThe good or the evil?
![Page 2: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/2.jpg)
Andrey Okonetchnikov@okonetchnikov
![Page 3: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/3.jpg)
![Page 5: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/5.jpg)
Past Current time Future
![Page 6: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/6.jpg)
A brief history of CSS
![Page 7: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/7.jpg)
CSS was designed for documents
![Page 8: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/8.jpg)
![Page 9: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/9.jpg)
![Page 10: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/10.jpg)
![Page 11: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/11.jpg)
![Page 12: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/12.jpg)
How many of you have ever re-designed a web-site with CSS changes only?
✋
![Page 13: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/13.jpg)
CSS was designed for documents, not for web-applications
![Page 14: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/14.jpg)
![Page 15: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/15.jpg)
![Page 16: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/16.jpg)
![Page 17: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/17.jpg)
Best practices
![Page 18: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/18.jpg)
Separation of concerns
JS
CSS
HTML
![Page 19: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/19.jpg)
Separation of concerns
JS
CSS
HTML
Chec
kbox
Butt
on
Drop
dow
n
List
Mod
al
![Page 20: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/20.jpg)
UI Components
Button
![Page 21: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/21.jpg)
UI Components
Button
![Page 22: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/22.jpg)
• Logic • HTML • Styles
Button
• Logic • HTML • Styles
• Logic • HTML • Styles
![Page 23: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/23.jpg)
Past Current time Future
![Page 24: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/24.jpg)
HTML-in-JSa.k.a. JSX
![Page 25: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/25.jpg)
![Page 26: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/26.jpg)
![Page 27: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/27.jpg)
![Page 28: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/28.jpg)
![Page 29: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/29.jpg)
https://trends.google.com/trends/explore?q=%2Fm%2F012l1vxv,%2Fm%2F0268gyp
![Page 30: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/30.jpg)
![Page 31: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/31.jpg)
Everything is a component!
![Page 32: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/32.jpg)
f(state) !=> UI
![Page 33: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/33.jpg)
What about styles?
![Page 34: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/34.jpg)
• Logic • HTML • Styles
Button
• Logic • HTML • Styles
• Logic • HTML • Styles
![Page 35: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/35.jpg)
• Logic • HTML • Styles
Button
• Logic • HTML • Styles
• Logic • HTML • Styles
![Page 36: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/36.jpg)
• Logic • HTML • Styles
Button
• Logic • HTML • Styles
• Logic • HTML • StylesGlobal styles
![Page 37: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/37.jpg)
![Page 38: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/38.jpg)
Global CSS
1 .btn { 2 !/* styles for button !*/ 3 } 4 5 .active { 6 !/* styles for active button !*/ 7 background-color: blue; 8 } 9 10 .label { 11 !/* styles for button label !*/ 12 }
1 .star { 2 !/* styles for star !*/ 3 } 4 5 .active { 6 !/* styles for active star !*/ 7 background-color: orange; 8 } 9 💥
![Page 39: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/39.jpg)
.btn.active
![Page 40: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/40.jpg)
.content .albums .album .btn
![Page 41: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/41.jpg)
![Page 43: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/43.jpg)
.Block
.Block#--element
.Block#--element__modifier
B E M
Block Element Modifier
![Page 44: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/44.jpg)
Without BEM
<button class="button active"> <span class="label"> Click me! %</span> %</button>
![Page 45: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/45.jpg)
With BEM
<button class="Button Button__active"> <span class="Button#--label"> Click me! %</span> %</button>
![Page 46: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/46.jpg)
BEM prevents this!
![Page 47: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/47.jpg)
Manual work
![Page 48: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/48.jpg)
<ul class="nav"> <li class="nav__item nav__item_active"><a class="nav__link">One%</a>%</li> <li class="nav__item"><a class="nav__link">Two%</a>%</li> <li class="nav__item"><a class="nav__link">Three%</a>%</li> %</ul>
![Page 49: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/49.jpg)
.nav__item { padding: 4px 10px; color: black; }
.nav__item_active { font-weight: bold; background: #ffc7c7; }
.navigation__item { padding: 4px 10px; color: black; }
.navigation__item_active { font-weight: bold; background: #ffc7c7; }
![Page 50: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/50.jpg)
![Page 51: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/51.jpg)
![Page 52: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/52.jpg)
Manual work
![Page 54: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/54.jpg)
Before: BEM-style
const Button = ({ children }) !=> ( <button className="Button"> <span className="Button__label"> { children } %</span> %</button> )
![Page 55: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/55.jpg)
After: CSS-modules
import styles from './Button.css'
const Button = ({ children }) !=> ( <button className={styles.button}> <span className={styles.label}> { children } %</span> %</button> )
![Page 56: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/56.jpg)
CSS-modules✅ Explicit imports
✅ Scoped & fast selectors
✅ True rules isolation
✅ Code reuse, expressiveness
✅ Framework agnostic
🚫 Non standard syntax (compose, vals, etc.)
🚫 Build step is required
🚫 No dead code elimination
🚫 No automatic vendor prefixing
![Page 58: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/58.jpg)
export const styles = { button: { padding: '10px', '&:hover': { background: 'blue' } }, '@media (min-width: 1024px)': { button: { padding: '20px' } } }
![Page 59: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/59.jpg)
Before: BEM-style
const Button = ({ children }) !=> ( <button className="Button"> <span className="Button__label"> { children } %</span> %</button> )
![Page 60: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/60.jpg)
After: JSS
import injectSheet from 'react-jss' import styles from './styles'
const Button = ({ classes, children }) !=> ( <button className={classes.button}> <span className={classes.label}> {children} %</span> %</button> )
export default injectSheet(styles)(Button)
![Page 61: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/61.jpg)
CSS-in-JS (JSS)✅ Explicit imports
✅ Scoped & fast selectors
✅ True rules isolation
✅ Code reuse, expressiveness
✅ Framework agnostic
✅ Uses w3c standard
✅ No build step is required
✅ Dead code elimination
✅ Automatic vendor prefixing
![Page 62: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/62.jpg)
–Max or Glenn, probably?
“If we generate class names, why do we still use class attribute?”
![Page 63: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/63.jpg)
Natural mapping
The Design of Everyday Things by Don Norman
![Page 64: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/64.jpg)
Natural mapping
![Page 66: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/66.jpg)
#// Create a Title component that'll render an <h1> tag with some styles const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `;
render( <Title> Hello PiterCSS! %</Title> );
![Page 67: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/67.jpg)
const Button = styled.button` )/* Adapt the colours based on primary prop )*/ background: ${props !=> props.primary ? 'palevioletred' : 'white'}; color: ${props !=> props.primary ? 'white' : 'palevioletred'}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `;
render( <div> <Button>Normal%</Button> <Button primary>Primary%</Button> %</div> );
![Page 68: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/68.jpg)
“styled-components […] removes the mapping between components and styles.”
https://www.styled-components.com/
![Page 69: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/69.jpg)
💅styled-components
✅ No messing with classNames (implementation detail)
✅ Same mental model and structure for the whole application
![Page 70: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/70.jpg)
And because the model is the same…
![Page 71: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/71.jpg)
💅styled-components for react-native!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 ( <StyledView> <StyledText>Hello World!%</StyledText> %</StyledView> ) } }
![Page 72: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/72.jpg)
– https://www.cooper.com/journal/2012/08/the-best-interface-is-no-interface
“No UI is about machines helping us, instead of us adapting for computers.”
![Page 73: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/73.jpg)
Myths & Lies
![Page 74: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/74.jpg)
CSS-in-JS is slow
![Page 75: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/75.jpg)
CSS-in-JS ≠ inline styles!
import { css } from 'glamor'
const title = css({ fontSize: '1.8em', fontFamily: 'Comic Sans MS', color: 'blue' })
console.log(title) #// → 'css-1pyvz'
![Page 76: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/76.jpg)
http://cssinjs.org/function-values/
![Page 77: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/77.jpg)
Maintanability > Speed
![Page 78: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/78.jpg)
https://twitter.com/dan_abramov/status/842329893044146176
![Page 79: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/79.jpg)
![Page 80: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/80.jpg)
![Page 82: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/82.jpg)
![Page 83: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/83.jpg)
import React from 'react' import { createComponent } from 'react-fela' import felaSnapshot from './test-helpers/felaSnapshot.js'
const boxRules = ({ size = 10 }) !=> ({ width: size + 'px', height: size + 'px', backgroundColor: 'red' })
const Box = createComponent(boxRules)
describe('Box', () !=> { it('should render component', () !=> { const snapshot = felaSnapshot(<Box>hello%</Box>) expect(snapshot).toMatchSnapshot() }) })
![Page 84: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/84.jpg)
exports[`Box should change box size when size prop is passed 1`] = ` <div className="a b c" id={undefined} style={undefined} > hello %</div> `;
![Page 85: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/85.jpg)
Crafted CSS is better for performance
![Page 86: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/86.jpg)
![Page 87: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/87.jpg)
https://meiert.com/en/blog/20170531/70-percent-css-repetition/
“In CSS, we repeat ourselves too much.While it’s absolutely, practically possible to limit
declaration repetition to 10–20%, reality averages 72% (median 66%).”
![Page 88: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/88.jpg)
☑Use functional CSS
![Page 90: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/90.jpg)
Atomic CSS
<div class="Pos(a) Bgc(brandColor) W(columnWidth) H(90px)">%</div> <div class="C(brandColor) BdB Bdc(brandColor) Mstart(columnWidth) P(10px)"> Lorem ipsum %</div>
![Page 91: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/91.jpg)
![Page 93: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/93.jpg)
Tachyons
<article class="pa3 pa5-ns"> <h1 class="f3 f1-m f-headline-l">Title%</h1> <p class="measure lh-copy"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %</p> %</article>
![Page 94: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/94.jpg)
![Page 95: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/95.jpg)
![Page 96: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/96.jpg)
Manual work
![Page 97: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/97.jpg)
![Page 98: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/98.jpg)
Enables CSS optimisations
![Page 99: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/99.jpg)
but still very easy to use API
import {styled} from 'styletron-react';
const Panel = styled('div', (props) !=> ({ backgroundColor: props.alert ? 'orange' : 'lightblue', fontSize: '12px' }));
<Panel alert>Danger!%</Panel>
![Page 101: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/101.jpg)
✅Use Generate functional CSS
![Page 102: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/102.jpg)
![Page 103: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/103.jpg)
SASS has variables, mixins, etc.
![Page 104: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/104.jpg)
JavaScript SASS has variables, mixins functions
![Page 105: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/105.jpg)
https://una.im/sass-es2015/#💁
![Page 106: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/106.jpg)
Variables
let color = "red";
$color: "red";
![Page 107: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/107.jpg)
Lists
const colorArray = ["red", "yellow", "green"];
for (const color of colorArray) { console.log(color); }
$colorList: "red", "yellow", "green";
@each $color in $colorList { @debug $color; }
![Page 108: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/108.jpg)
Functions
function PrintMe(firstArg, --...theRest) { console.log(firstArg, theRest); }
PrintMe('Hello', 'You', 'Look', 'Nice');
@mixin funCircle($size, $gradient--...) { width: $size; height: $size; border-radius: 50%; background: radial-gradient($gradient); }
.entrancing { @include funCircle(50px, blue 10%, red 80% ,pink); }
![Page 110: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/110.jpg)
#// Styles as object usage const styles = { background: lighten(0.2, '#CCCD64'), background: lighten(0.2, 'rgba(204,205,100,0.7)'), }
#// styled-components usage const div = styled.div` background: ${lighten(0.2, '#FFCD64')}; background: ${lighten(0.2, 'rgba(204,205,100,0.7)')}; `
#// Output
element { background: "#e5e6b1"; background: "rgba(229,230,177,0.7)"; }
![Page 111: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/111.jpg)
Just use the platform*!* Or, just Google Chrome?
![Page 112: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/112.jpg)
![Page 113: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/113.jpg)
![Page 114: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/114.jpg)
![Page 115: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/115.jpg)
![Page 116: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/116.jpg)
![Page 117: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/117.jpg)
styled-jsx
export default () !=> ( <div> <p>only this paragraph will get the style :)%</p> { )/* you can include <Component //>s here that include other <p>s that don't get unexpected styles! )*/ } <style jsx>{` p { color: red; } `}%</style> %</div> )
![Page 118: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/118.jpg)
styled-jsx
import _JSXStyle from 'styled-jsx/style'
export default () !=> ( <div data-jsx='cn2o3j'> <p data-jsx='cn2o3j'>only this paragraph will get the style :)%</p> <_JSXStyle styleId='cn2o3j' css={`p[data-jsx=cn2o3j] {color: red;}`} //> %</div> )
![Page 119: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/119.jpg)
![Page 120: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/120.jpg)
To complicated to setup
![Page 121: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/121.jpg)
How many of you know how to extract critical CSS or doing that?
✋
![Page 122: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/122.jpg)
Critical CSS with <💅>
import { renderToString } from 'react-dom/server' import { ServerStyleSheet } from 'styled-components'
const sheet = new ServerStyleSheet() const html = renderToString(sheet.collectStyles(<YourApp //>)) const css = sheet.getStyleTags()
![Page 123: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/123.jpg)
https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660
“If you build your app with progressive enhancement in mind, despite being written entirely in JavaScript, it
might not require JavaScript on the client at all.”
![Page 124: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/124.jpg)
Past Current time Future
![Page 125: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/125.jpg)
Universal rendering
![Page 126: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/126.jpg)
![Page 127: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/127.jpg)
import React from 'react'; import {AppRegistry, Pano, Text, View} from 'react-vr';
class WelcomeToVR extends React.Component { render() { #// Displays "hello" text on top of a loaded 360 panorama image. #// Text is 0.8 meters in size and is centered three meters in front of you. return ( <View> <Pano source={asset('chess-world.jpg')}//> <Text style={{ fontSize: 0.8, layoutOrigin: [0.5, 0.5], transform: [{translate: [0, 0, -3]}], }}> hello %</Text> %</View> ); } };
AppRegistry.registerComponent('WelcomeToVR', () !=> WelcomeToVR);
![Page 128: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/128.jpg)
![Page 129: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/129.jpg)
![Page 130: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/130.jpg)
💅styled-components for Sketch!
![Page 131: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/131.jpg)
![Page 132: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/132.jpg)
![Page 133: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/133.jpg)
Design systems shared between designers and developers!
![Page 134: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/134.jpg)
![Page 135: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/135.jpg)
Final thoughts
![Page 136: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/136.jpg)
![Page 137: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/137.jpg)
“CSS-in-JS enforces the best practices trough technology and shared knowledge.”
![Page 138: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/138.jpg)
✌💖🦄
![Page 139: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/139.jpg)
Thank you!
![Page 140: CSS-in-JS · Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. %&p> %&article> Manual work. Enables CSS optimisations. but still very easy to](https://reader033.fdocuments.us/reader033/viewer/2022060703/606feb7371bf3b528f79f9d2/html5/thumbnails/140.jpg)
Andrey Okonetchnikov
@okonetchnikov
http://okonet.ru
https://github.com/okonet
UI Engineer @ Feedly