Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape...
Transcript of Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape...
![Page 1: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/1.jpg)
Styling React ComponentsHow to Escape from Selector Hell
Charlie Marsh Khan Academy
July 9, 2014
![Page 2: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/2.jpg)
“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
![Page 3: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/3.jpg)
Selectors“Patterns used to select the element(s) you want to style.”
![Page 4: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/4.jpg)
div { ... } <div> ... </div>
Selector: Applies to:
![Page 5: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/5.jpg)
div p { ... }
Selector: Applies to:
<div> <p> ... </p> </div>
![Page 6: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/6.jpg)
“Wow, selectors seem really cool!”
![Page 7: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/7.jpg)
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>
![Page 8: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/8.jpg)
“But Charlie, no one really does that!”
![Page 9: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/9.jpg)
“But Charlie, no one I work with really does that!”
![Page 10: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/10.jpg)
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
![Page 11: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/11.jpg)
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.
![Page 12: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/12.jpg)
Result:!Selectors make it very, very difficult to refactor.
![Page 13: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/13.jpg)
Preprocessors• Preprocessors do make CSS easier
• Solve the “unpredictable cascading” problem
• What do they do wrong?
![Page 14: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/14.jpg)
#main { width: 97%; !
p, div { font-size: 2em; a { font-weight: bold; } } !
pre { font-size: 3em; } }
![Page 15: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/15.jpg)
body { div.container { div.content { div.articles { & > div.post { div.title { h1 { a { } } }
![Page 16: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/16.jpg)
“Wow, this is a mess! What can we do?”
- Audience member
![Page 17: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/17.jpg)
Back to React• Aiming for:
• Modularity
• Composability
• Maintainability
• Stylesheets and selectors can poison your components
![Page 18: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/18.jpg)
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)
![Page 19: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/19.jpg)
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 } };
![Page 20: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/20.jpg)
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}>
![Page 21: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/21.jpg)
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)
![Page 22: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/22.jpg)
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
![Page 23: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/23.jpg)
Result:!React components as they’re meant to be.
![Page 24: Styling React Components - Charlie Marsh · 2018-12-07 · Styling React Components How to Escape from Selector Hell Charlie Marsh Khan Academy July 9, 2014 “My only beef with CSS](https://reader035.fdocuments.in/reader035/viewer/2022070802/5f02c7967e708231d405f8af/html5/thumbnails/24.jpg)