I'm a huge fan of SCSS + BEM, with the component-driven architecture of BEM complementing the component-driven architecture of React. I usually give each component its own small stylesheet and @include it in a main stylesheet. I have found that this gives me the most flexibility, readability, and re-usability of anything I've seen.
I've had great results with a similar setup, (also a React app), although with two differences:
Rather than @include in a core stylesheet, I tend to import the stylesheet directly in the component's JS source, using webpack loaders to handle this. This allows for slightly better build performance when developing, especially when using Storybook or similar, as well as not having a huge list of stylesheet imports in one place.
I also like to use CSS modules in some projects, as this makes naming collisions impossible, allowing scoping without any cognitive overhead.
I'm a huge fan of SCSS + BEM, with the component-driven architecture of BEM complementing the component-driven architecture of React. I usually give each component its own small stylesheet and
@include
it in a main stylesheet. I have found that this gives me the most flexibility, readability, and re-usability of anything I've seen.I've had great results with a similar setup, (also a React app), although with two differences:
@include
in a core stylesheet, I tend toimport
the stylesheet directly in the component's JS source, using webpack loaders to handle this. This allows for slightly better build performance when developing, especially when using Storybook or similar, as well as not having a huge list of stylesheet imports in one place.One great thing baked into Angular: CSS scopes! I am a fan of Atomic Design :)