Styling React Components: How to Escape from Selector Hell

React components are meant to be modular, composable, maintainable, and so much more. But when you style your components with CSS selectors and other wizardry, you throw away so many of these nice properties. This talk focuses on why CSS selectors are a problem and what you can do about it when working with React.

Talk delivered @ Khan Academy, July 9, 2014.

Transcript

1. Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014
2. “My only beef with CSS is the entire idea of ‘selectors’. If we could get rid of those, [CSS would be] much more predictable [and] easy.” - Pete Hunt, React Guru
3. Selectors “Patterns used to select the element(s) you want to style.”
4. div { ... } <div> ... </div> Selector: Applies to:
5. div p { ... } Selector: Applies to: <div> <p> ... </p> </div>
6. “Wow, selectors seem really cool!”
7. Selectors: Extended div > p ! div + p ! div ~ p ! div p:last-child div.foo ~ div.bar:after > span:last-of-type + a:visited <div> <p>Line one</p> <span> <p>Line two</p> </span> <p>Line three</p> </div> <p>Line four</p> <p>Line five</p>
8. “But Charlie, no one really does that!”
9. “But Charlie, no one I work with really does that!”
10. Selectors @ KA input[type="radio"]:checked + span:before .framework-thing .paragraph > ul:not(.thing-widget-radio) .thing-content > .container .thing-content-view-root > .content-pane-inner .main-header > .topic-info > .topic-icon
11. 1. You don’t know what will happen when… you actually load your webpage. 2. You don’t know what will happen when… you change anything in the DOM. 3. You don’t know what will happen when… you change anything in your stylesheet.
12. Result:! Selectors make it very, very difficult to refactor.
13. Preprocessors • Preprocessors do make CSS easier • Solve the “unpredictable cascading” problem • What do they do wrong?
14. #main { width: 97%; ! p, div { font-size: 2em; a { font-weight: bold; } } ! pre { font-size: 3em; } }
15. body { div.container { div.content { div.articles { & > div.post { div.title { h1 { a { } } }
16. “Wow, this is a mess! What can we do?” - Audience member
17. Back to React • Aiming for: • Modularity • Composability • Maintainability • Stylesheets and selectors can poison your components
18. Solution #1: Stylesheets as Dependencies // Applying a stylesheet var css = require("style!css!./file.css"); ! // Chaining loaders var css = require("style!css!less!./file.less"); • Goal: Make React component <—> stylesheet relationship explicit • Implemented in Webpack (Browserify alternative)
19. Solution #2: Inlining • Goal: Put all styling in your JavaScript file var styles = StyleSheet.create({ base: { width: 38, height: 38 } }); ! <span style={styles.base} /> var styles = { base: { width: 38, height: 38 } };
20. Solution #3: RCSS • Goal: Convert JS style objects into CSS classes var button = { padding: '6px 12px', }; ! // Add class to HTML page RCSS.createClass(button); <button className={button.className}>
21. Progress • Joel moved react-components over to RCSS • Charlie moved three Perseus widgets (+ some miscellaneous components) over to RCSS • Scattered development taking place on our own fork (Khan/RCSS)
22. LESSons 1. Don’t be afraid to style from within your JavaScript file 2. Avoid adding deeply nested selectors (follow the Inception Rule) 3. Avoid mimicking the DOM
23. Result:! React components as they’re meant to be.