| My main complaint with CSS in JS is that a strict naming convention solves a lot of the problems without coupling styles in application bundles. Basically, I don't want to invalidate my JS bundle just to include a new visual theme. Luckily, you can use CSS best practices with React. The problems mentioned in the presentation, followed by some CSS-friendly solutions -- 1) Global namespace: all selectors are global Use a naming convention. 2) Dependencies: no way to specify that a block of markup depends on a particular CSS module Use a build process and a naming convention that includes a component name. 3) Dead code elimination: difficult to determine when styles are no longer needed Loop over components and extract CSS component names from class attributes. 4) Minification: can't minify class names in markup Not a bottleneck, nobody cares. 5) Sharing constants: can't share constants/variables with javascript Use rework/postcss. 6) Non-deterministic resolution: loading styles asynchronously can result in different results since specificity assumes later rules should override earlier rules and async load order is arbitrary Use SUIT CSS to prevent collisions and normalize specificity. 7) Isolation: base component CSS can be trashed by authors of subcomponents, making it difficult to change base CSS. Reduce responsibilities of base component CSS. Encourage use of modifier classes. Ban tag selectors from component CSS. Use a SUIT CSS compliance checker. I use SUIT CSS with React and couldn't be happier. |