Components: A Styling Odyssey

The past few years have seen an explosion of methodologies for styling component-based web applications, fueled in part by explorations of CSS in JS with React. Let's look at the CSS challenges that have driven these approaches and the ways that different methods meet (or ignore!) them. We'll run the gamut from traditional CSS to styling with JavaScript and back.

Transcript

1. COMPONENTS A STYLING ODYSSEY
2. @alexlande alexlande.com
3. SCALE STYLE at
5. .Sidebar {} .Sidebar.isExpanded {} .Sidebar__section {} .Btn {} .Btn--primary {} .Btn--round {} NAMING CONVENTIONS
6. CODE STANDARDS
7. CODE REVIEW
8. DESPITE OUR BEST EFFORTS
9. CSS AT SCALE IS HARD
10. SPECIFICITY HELL
11. SPECIFICITY HELL
12. SPECIFICITY HELL
13. SOURCE ORDER WOES
14. .header a { color: white; } .flyout a { color: purple; } SOME OPTIONS Pages LOG IN MENU
15. SOME OPTIONS Pages LOG IN MENU .flyout a { color: purple; } .header a { color: white; }
16. NAMING COLLISIONS
17. .product-page .sidebar .btn {…}
18. .ui-ProductSideBar__button
19. DEAD CODE
20. HOW DO WE FIX IT?
21. INLINE STYLES RIGHT?
22. Christopher “vjeux” Chedeau React: CSS in JS
23. I HEARD YOU HAVE TO USE INLINE STYLES IN REACT - Unattributed “
24. IT’S REALLY CSS IN JS
25. JSS APHRODITE FELA GLAMOR STYLED COMPONENTS RADIUM
26. BUTTON TIME styles = { background: "purple", display: "block", padding: "1rem" }
27. BUTTON TIME ":hover": { background: "blue" }
28. "@media (min-width: 400px)": { display: "inline-block" } BUTTON TIME
29. NO SPECIFICITY SOURCE ORDER INDEPENDENT NO NAMING COLLISIONS STYLE CO-LOCATION RUNTIME COMPUTATION GREAT
30. INCREASES JS BUNDLE SIZE CAN’T USE CSS ECOSYSTEM MORE RUNTIME COMPLEXITY LESS GREAT
31. CSS MODULES
32. // blog-post.css .title { font-size: 2rem; } // blog-post.js var styles = require("./blog-post.css"); <h2 className={{styles.title}}> // Rendered HTML <h2 class="title_12ekjlk">
33. COMPOSITION
34. // blog-post.css .normal { font-size: 2rem; } .highlight { composes: normal; color: orange; } // blog-post.js var styles = require("./blog-post.css"); <h2 className={{styles.highlight}}> // Rendered HTML <h2 class="normal_41awdnl highlight_98qoijs">
35. NO NAMING COLLISIONS EXPLICIT SELECTOR IMPORTS COMPOSITION GREAT
36. DOESN’T HELP WITH SPECIFICITY DOESN’T HELP WITH SOURCE ORDER MORE BUILD COMPLEXITY LESS GREAT
37. FUNCTIONAL CSS
40. COMPOSITION (AGAIN)
41. // virtual-classes.js var title = 'font-md color-black mb3 uppercase' // blog-post.js <h2 class={ styles.title }> // Rendered HTML <h2 class="font-md color-black mb3 uppercase">
42. FLAT SPECIFICITY GRAPH SOURCE ORDER INDEPENDENT SMALL CSS BUNDLE SIZES GREAT
43. NAMING COLLISIONS POSSIBLE LEARNING CURVE LESS GREAT
44. OBJECT ORIENTED CSS
45. CHALLENGES CAN BE SOLVED WITH DILIGENCE
46. CAREFUL WITH DESCENDANT SELECTORS PREFER CLASS SELECTORS CAREFUL WITH MULTI-CLASS PATTERN OOCSS ADVICE USE STYLELINT TO CHECK FOR THE ABOVE
47. THERE IS NO RIGHT ANSWER
48. BETTER UX BETTER DX means
49. KEEP PUSHING
50. @alexlande alexlande.com THANKS!
51. LINKS Specificity Graphs http://csswizardry.com/2014/10/the-specificity- graph/ React: CSS in JS https://vimeo.com/116209150 CSS Modules https://github.com/css-modules/css-modules Basscss http://www.basscss.com/ Tachyons http://tachyons.io/ Basscss Box Example http://www.basscss.com/#box React Functional CSS Protips (Virtual Classes) https://github.com/chibicode/react-functional- css-protips Radium https://formidable.com/open-source/radium/ JSS https://github.com/cssinjs/jss Aphrodite https://github.com/Khan/aphrodite Glamor https://github.com/threepointone/glamor Fela http://fela.js.org/ Styled Components https://styled-components.com/