If you’re developing a React app with many components, some of which are reusable, then you can find yourself running into all sorts of problems with CSS when it comes to reusing style, or overiding style in other components and it can get messy and difficult to maintain quite quickly.
I found that this pattern works quite nicely if you want to keep things composable when working with a large application.
Say you have a simple loading spinner component that will be reused in multiple contexts, you might define it like so:-
Now you can use SCSS mixins to design a composable style for this. Note the use of SCSS’s ampersand operator, this is actually integral to keping the code dry in this solution because it creates a contract between the mixin and the component that it gets included in, by enforcing consistent selectors.
Now you want to use your component and position it on load, so you include it in a parent
Here is a jsfiddle to that effect.
Now you can import your spinner style and have it scoped only to the page selector, with very little source duplication.
Now imagine you want to include a much smaller version of this component in a different context, that doesn’t have the loading message included, some imaginary updateable item for example.
The mixin approach now allows us to code a style based on composition, with no side effects across components.
This will give you selectors in the spinner markup like:
Which keeps the style completely modular with no collision worries. My question to the community is, how do you see this kind of approach affecting compiled CSS size and page/component load/chunking? Also, how does this compare with styled components and other CSS in JS approaches?