CSS-in-JS - Moving Styles Into Javascript

What is CSS-in-JS?

We already mentioned in the introduction that CSS-in-JS is a bit of a hotly debated topic. Opponents say that users of CSS-in-JS simply do not understand the cascade to write scalable CSS. Proponents, on the other hand, explain that the cascade is not the main reason for choosing CSS-in-JS but argue that a safer way is needed to write highly isolated components. However, there could be room and reasons for both. CSS-in-JS certainly has a reason to exist. But what even is CSS-in-JS?

The CSS-in-JS approach mandates that the styles that are commonly found in CSS files are now moved into JavaScript. As was already the case in CSS modules, the primary goal is to create highly isolated components free of conflict, making them easy to reuse throughout the application. However, as opposed to CSS modules, the styling in ...