CSS in JS

In this talk we will go through the main problems with CSS at scale and we will see some interesting JavaScript-based solutions, from Inline Styles to CSS Modules. Are you ready to enter the magical world of CSS in JS?

Transcript

1. CSS in JS @MicheleBertoli
2. Michele (Mee-keh-leh) Front End Developer at YPlan Member of WEBdeBS Follow me @MicheleBertoli I’ve got the CSSinJS skill on LinkedIn
3. MicheleBertoli/css-in-js
4. - Give it five minutes - Unlearn everything - Components Mindset
5. Cascading Style Sheets
6. Problems with CSS at scale (vjeux) - Global Namespace - Dependencies - Dead Code Elimination - Minification - Sharing Constants - Non-deterministic Resolution - Isolation
7. Inline Styles
8. const divStyle = { color: 'white', backgroundImage: `url(${imgUrl})`, WebkitTransition: 'all', msTransition: 'all', }; ReactDOM.render( <div style={divStyle}>Hello World!</div>, mountNode );
9. Pros - Recompute styles - Object literals - Application state - Testing
10. Cons - Pseudo classes/elements - Media queries - Style fallbacks - Animations - !important - Separation of concerns - Performance (?)
11. Debugging
12. Aphrodite
13. import { StyleSheet, css } from 'aphrodite'; const styles = StyleSheet.create({ btn: { color: 'red' } }); el.innerHTML = `<button class="${css(styles.btn)}">Yo</button>`;
14. const styles = StyleSheet.create({ hover: { ':hover': { color: 'red' } }, small: { '@media (max-width: 600px)': { color: 'red' } }, });
15. Aphrodite Inline Styles that work.
16. Features - Pseudo selectors - Media queries - Smart style injection - Autoprefixer included
17. CSSX
18. const sheet = cssx(); const button = sheet.add('.button', { color: 'red', }); button.update({ color: 'green', });
19. const sheet = cssx(); sheet.add(<style> .button { color: blue; } </style>);
20. CSSX CSSX is a set of tools that will help you write vanilla CSS in JavaScript.
21. Benefits - Avoid additional “state” classes - No interaction with the DOM - Real dynamic CSS
22. CSS Modules
23. // button.css .common { color: red; } // button.js import styles from "./button.css"; el.innerHTML = `<button class="${styles.common}">Yo</button>`;
24. .JoFm3I_KMlvnoKpksAd60 { color: red; } <button class="JoFm3I_KMlvnoKpksAd60">Yo</button>;
25. CSS Modules A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.
26. Composition .className { color: green; background: red; } .otherClassName { composes: className; color: yellow; }
27. Webpack module.exports = { module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' } ] } };
29. Bonus
30. @media screen and (min-width: 48em) { .f3-ns { font-size: 1.5rem; } } .f4 { font-size: 1.25rem; } .mb0 { margin-bottom: 0; } .fw6 { font-weight: 600; } <h2 class="f4 f3-ns fw6 mb0">Responsive</h2>
31. Atomic CSS The bad parts: - Too many classes - Similar to inline styles - Hard to maintain The good parts: - Quick prototyping - CSS file size
32. Atomic CSS Modules .title { composes: fw6 f4 f3-ns from './fonts.css'; composes: mb0 from './margins.css'; } <h2 class="${styles.title}">Responsive</h2>
33. The End
34. Recap - Use the right tool, no matter if it breaks the rules - Inline styles vs local scope - Appearance vs state - Have fun :)
35. Any Questions?