*/ 2 `class=${[styles.normal, styles['active']].join(" ")}` 3 4 /* Using a single name makes a big difference */ 5 `class=${styles['active']}` 6 7 /* camelCase makes it even better */ 8 `class=${styles.isActive}`
*/ } .normal { composes: common; /* anything that only applies to Normal */ } .disabled { composes: common; /* anything that only applies to Disabled */ }
AST 2. Lots of plugins and easy to write your own 3. Tools! stylelint or automatic properties sorting 4. IDE Support (WebStorm, Atom, Sublime) 5. Shared constants between CSS and JS 6. Works not only with SPAs or React 7. It’s just CSS*
✅ You plan to update your CSS in the future ✅ You use third-party CSS and don’t want to break things ✅ You care about code readability and reusability ✅ You hate manual work