State of React and CSS
Arunoda Susiripala
19511

Looked into CSS Modules and other options, all have their quirks but mostly are painful if you have Universal JavaScript.

Standard SCSS processed via Webpack with simplified BEM naming convention (namespaces class wrapper) is the way I’m going.

Component SCSS is handled via SCSS @import, this also means I can use SCSS @mixins and @placeholders.

You can colocate component CSS files or keep them in a css/components folder. Just change the @import path.

Only import the main.scss in client app.js so Webpack can work it’s magic.

This is standard Sass/SCSS CSS approach and is framework agnostic.

See this article for details: Styling React components in SASS

Show your support

Clapping shows how much you appreciated Johan Steenkamp’s story.