React Inline Styles and the Future of CSS

Writing and maintaining CSS for large applications (and large teams) can be challenging. Teams often have trouble with brittle selectors, naming collisions, specificity, and pile-ups of dead code.

After seeing these issues first-hand on large projects, I built Radium: a JavaScript library for styling React applications with inline styles. In the context of a React application, inline styling elegantly solves many of the issues with large-scale CSS. It also gives you the benefits of a CSS preprocessor like Sass, with extra power for expressive styling

In this presentation, we'll compare the benefits of approaches like Radium to some upcoming and proposed additions to the CSS specification that will help make scalable CSS easy in the future, whether you're using React or not. We'll talk about things like:

- Scoped CSS
- Shadow DOM
- CSS Variables and Custom Media Queries
- Native CSS Extends

Presented at CSS Dev Conf 2015

Transcript

1. REACT INLINE STYLES and the FUTURE OF CSS
2. Hey! @alexlande
3. Seattle “Kerry Park, Start of Spring 1” by C.M. Keiner is licensed under CC BY 2.0
4. Seattle “Seattle Thunderstorm 1” by C.M. Keiner is licensed under CC BY 2.0
6. REACT INLINE STYLES and the FUTURE OF CSS
7. NO FUTURE
8. I’m an architect, honest!
9. You keep using that word…
11. Not everybody cares about CSS
12. you don’t have to care Good architecture means
13. STYLE GUIDE
14. NAMING CONVENTIONS .Sidebar {} .Sidebar.isExpanded {} .Sidebar__section {} .Btn {} .Btn--primary {} .Btn--round {}
15. AUTHORING GUIDELINES
16. CODE REVIEW
17. EVERYTHING WAS PERFECT!
18. EVERYTHING WAS TERRIBLE!
19. SPECIFICITY HELL
20. SPECIFICITY HELL
21. SPECIFICITY HELL
22. SPECIFICITY HELL
23. “Not bad” is not great.
25. CoolCorp MENU a { color: orange; }
26. CoolCorp MENU .header a { color: white; }
27. CoolCorp MENU SOME OPTIONS Pages
28. CoolCorp MENU SOME OPTIONS Pages
29. CoolCorp MENU SOME OPTIONS Pages .flyout a { color: orange; }
30. CoolCorp MENU SOME OPTIONS Pages LOG IN .button { color: white; }
31. CoolCorp MENU SOME OPTIONS Pages LOG IN
32. CoolCorp MENU SOME OPTIONS Pages LOG IN .flyout .button { color: white; }
33. CoolCorp MENU SOME OPTIONS Pages LOG IN .button { color: white !important; }
34. CoolCorp MENU SOME OPTIONS Pages LOG IN .header .flyout .button { color: white; }
35. CoolCorp MENU BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON BUTTON
36. SOURCE ORDER
 WOES
37. CoolCorp MENU SOME OPTIONS Pages .header a { color: white; } .flyout a { color: orange; } LOG IN
38. CoolCorp MENU SOME OPTIONS Pages .flyout a { color: orange; } .header a { color: white; } LOG IN
39. NAMING COLLISIONS
40. It’s all globular
41. Just give me my fix!
42. .product-page .sidebar .btn {…}
43. DEAD CODE
44. DEAD CODE FOREVER
45. IMPOSSIBLE TO CHANGE
46. Let’s have a show of hands
47. ✴ Specificity ✴ Source Order ✴ Naming ✴ Dead Code ✴ Modification
48. BEM SMACSS OOCSS UNCSS IMMUTABLE STYLES ???
49. A challenger appears…
50. REACT
51. aficionado: one with afición
52. Components all the way down
53. <button type="button" class="button"> Click me! </button>
54. <Button>Click me!</Button>
55. <div class="flyout"> <i class="flyout-caret"></i> <h3 class="flyout-title">Hey!</h3> <div class="flyout-modal"> Content! </div> </div>
56. <Flyout title="Hey!"> Content! </Flyout>
57. A BETTER TOMORROW
58. AN INTERESTING STORY
59. Christopher “vjeux” Chedeau React: CSS in JS
60. Plan • Problems with CSS at scale 1. Global Namespace 2. Dependencies 3. Dead Code Elimination 4. Minification 5. Sharing Constants 6. Non-deterministic Resolution 7. Isolation
61. ✴ Specificity ✴ Source Order ✴ Naming ✴ Dead Code ✴ Modification 1. Global Namespace 2. Dependencies 3. Dead Code Elimination 4. Minification 5. Sharing Constants 6. Non-deterministic Resolution 7. Isolation
62. JS Everything!
63. COLIN HAS A QUESTION @colinmegill
64. Have you seen this talk? It’s pretty cool! I don’t know how practical it is. So, what’s missing?
65. WE CALLED IT RADIUM
66. So how does it work, then?
67. <div>JSX</div>
68. var styles = { color: "#333" } <div style={styles}>
69. No Selectors, No Semicolons, No Mercy
70. REGISTER styles = { background: "green", padding: "1rem" }
71. REGISTER <Button>Register</Button>
72. VARIABLES
73. NO SPECIFICITY
74. SOURCE ORDER INDEPENDENCE
75. ONE LESS HARD PROBLEM NAMING
76. DEAD CODE ELIMINATION
77. MODIFY AND MAINTAIN
78. ✴ Specificity ✴ Source Order ✴ Naming ✴ Dead Code ✴ Modification
79. OK
80. Back to Radium
81. styles = { color: "green", ":hover": { color: "blue" } } BROWSER STATES
82. BROWSER STATES onMouseEnter() { this.setState({ hover: true }); }
83. MEDIA QUERIES styles = { width: 50%, "@media (min-width: 600px)": { width: 75% } }
84. MEDIA QUERIES var mql = window.matchMedia( "min-width: 600px" ); mql.addListener(updateMediaState);
85. style={[ styles.base, styles[this.props.kind], this.props.block && styles.block ]} STYLE ARRAYS
86. class="btn btn-primary btn-block" STYLE ARRAYS
87. Let’s make a button
88. BUTTON TIME styles = { background: "green", display: "block", padding: "1rem" }
89. BUTTON TIME ":hover": { background: "blue" }
90. BUTTON TIME "@media (min-width: 400px)": { display: "inline-block" }
91. BUTTON TIME style={[ styles.base, styles[this.props.kind], this.props.block && styles.block ]}
92. BUTTON TIME <Button kind="inverse">
93. BUTTON TIME <Button block>
94. BUTTON TIME <Button kind="inverse" block >
95. So, what’s the problem?
96. Well…
97. FAKING IT
98. Enhance
99. Don’t panic
100. REACT ONLY
101. Virtual— what now?
102. DIFFING
103. DIFFING <div class="flyout flyout-active "> flyout-active <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> <li>Three</li>
104. DIFFING <div style=" display: inline-block; background: orange; color: black; color: white; "> color: white; color: black;
105. Still…
106. NO FUTURE
107. STRANGE EXPERIMENTS IN USERLAND!
108. CSS MODULES
109. // blog-post.css .title { font-size: 2rem; } // blog-post.js var styles = require("./blog-post.css"); <h2 class={{styles.title}}> // Rendered HTML <h2 class="title_12ekjlk">
110. ✴ Specificity ✴ Source Order ✴ Naming ✴ Dead Code ✴ Modification
111. CSS MODULE COMPOSITION
112. // blog-post.css .normal { font-size: 2rem; } .highlight { composes: normal; color: orange; } // blog-post.js var styles = require("./blog-post.css"); <h2 class={{styles.highlight}}> // Rendered HTML <h2 class="normal_41awdnl highlight_98qoijs">
113. @EXTEND WOES
114. .btn, .btn-primary, .btn-secondary, .btn-tertiary, .btn-inverse, .sidebar-btn, .sidebar-btn-primary, .sidebar-btn-secondary, .sidebar-btn-tertiary, .sidebar-btn-inverse { color: #333; }
115. .btn { color: #333; } .btn-primary { /* other styles */ } .sidebar-btn { /* other styles */ }
117. TOOLS, NOT RULES - SOMEONE “
118. BETTER UX BETTER DX =
119. I PLEDGE ALLEGIANCE TO THE SPEC
120. WEB COMPONENTS
121. button { background: blue; font-family: Chaparral; } <button>Normal DOM</button> Normal DOM
122. <cool-button> <style> button { background: orange; font-family: Verlag; } </style> <button>Shadow DOM!</button> </cool-button> Normal DOM SHADOW DOM!
123. @philwalton GO SEE PHIL
124. RUNTIME VARIABLES
125. CUSTOM PROPERTIES :root { --bg-color: green; } .btn{ background-color: var(--bg-color); }
126. @custom-media --medium (min-width: 30em); @media(--medium) { width: 50%; } CUSTOM MEDIA QUERIES
127. @custom-selector :--button button, .btn; :--button:hover { background-color: var(--hover-color); } CUSTOM SELECTORS
128. CSS EXTEND
129. .btn { padding: 1rem; } .btn-primary { @extend .btn; background-color: orange; }
130. .modal { /* modal styles */ } .panel { /* panel styles */ } @media (max-width: 599px) { .options { @extend .panel; } } @media (min-width: 600px) { .options { @extend .modal; } }
131. FINE “ - SOMEONE CSS IS
132. YOU JUST HAVE TO…
133. LET’S MAKE CSS EASY
134. @alexlande Thanks!