CSS in JS is another thing which I really don't understand why it exists in the first place. It only tries to solve an effect, but not the root cause. Because the initial problem is that people don't know and don't care about CSS architecture. Even here in this very thread, people write about UI overhauls which mess up the entire CSS. How is that even possible, if you stick to stuff, like BEM and ITCSS and namespaces?
CSS in JS is really bad.
- It doesn't only mix up different concerns of a web application,
- but it also slows down rendering (you first have to style the DOM, then interpret JS and finally re-style the DOM) and
- it bloats your traffic. Just look at the example code of styled components. There is a lot of JS code around the CSS when all you want is CSS in the first place
- Also it destroys any chance of sane CSS code highlighting, so your usual tools will not work (at least not without plugins)
- Last but not least, packers and optimizers will have a really hard time with it. They again have to know about it in order to optimize it, which usually is not the case