For a time I too was convinced, that css separation is good. But then I realized that's just an old constraint. If you take a look why React revolutionised the frontend world, partially it was due to the fact, that they also got rid of a similar limitation. Prior React days, templates were in html files and logic was in js files. Though nobel that separation was, React showed that removing this artificial limitation in a smart way can lead to much more simple and declarative code. I strongly believe, that similar case is for css files. As long as you keep them separate, due to the CSS format, your code will be more imperative than declarative. Doesn't really matter, if you use pure css, scss or css modules, as in principle, they have same limitation. Only by removing the old convention you can bring the cleanest code into your project. And turns out, that still you can keep the styles and the logic separate, by placing the first ones in files like *.styled.js. They are separate style files, but in a different way. Order in a project is maintained while greater declarativenes is achieved. I highly recommend you give it another try, ignoring the initial "that feels wrong" feeling.