Why CSS in JS?
The frameworks we build, the visual languages we formalize—they’re artifacts that ultimately live in a broader organizational context.
I did not understand. Thanks to the stellar work of Nicole Sullivan, Jonathon Snook, Nicolas Gallagher, Brad Frost and many more, we have choices of syntax and ways of conceptually and visually organising the CSS (BEM and Inverted Triangle CSS by Harry Roberts being my favourites).
- Base styles: variables, unclassed HTML elements
- Objects: prefixed with
o-, cosmetic-free abstractions
- Components: discrete blocks of UI
- Utilties: high specificity, very explicit helper classes
The components are organised by uniquely named directory, each containing the CSS, JS, SVG etc required for that component. Hell, you can even include HTML template snippets for the excellent Fractal component library. So why the need for CSS-in-JS?
Ethan’s words came back to me…
…artifacts that ultimately live in a broader organizational context
Me: CSS developer / You: JS developer
- Base styles: write lightweight ones yourself
- Components: eg Emotion, which is CSS-in-JS specific to React components
- Utilities: eg Tailwind utility first CSS framework