I’ve never quite understood the need for CSS in JS. CSS was already effectively managed through solutions like CSS Modules, so why add more complexity by including styles directly in JavaScript and introducing libraries to handle them?
One common argument is that it’s an extension of embedding markup inside JavaScript, but JSX is essentially just a different way of writing JavaScript function calls.
Moreover, it makes CSS far less portable due to the introduction of new syntax.
Hey,
The biggest advantage of CSS in JS compared to something like CSS Modules is how much it improves the developer experience (DX). With CSS in JS, you can keep your CSS, HTML, and JavaScript together in one place—essentially creating single-file components. This makes life so much easier when you’re working on large applications because everything is organized, and you can maintain context without jumping between files.
Another cool thing about CSS in JS is typed styles. These let you enforce that developers only use valid class names or specific values, which helps catch mistakes and keep things consistent. And styled components? They’re a dream for reusability, making it super easy to apply consistent styling across your app.
On top of that, CSS in JS tackles a lot of technical issues: it scopes styles (just like CSS Modules), removes unused styles automatically, lets you use JavaScript values for dynamic props, and handles critical CSS—so only the styles you need are loaded for a given page.
Modern frameworks like Emotion, Styled Components, Linaria, and StyleX give you plenty of options for how your CSS is output, from atomic styles to CSS Modules-like classes. And many of these tools come with little or no runtime cost. So, while CSS Modules is still great, CSS in JS goes a step further, offering flexibility and DX improvements without adding unnecessary bloat.
Just to add to the answer of @charity-majors
The real magic of CSS in JS is its flexibility and how it brings everything together in a component-oriented way. Instead of juggling separate CSS and JS files, you can embed your styles right into your components. This tight coupling between logic, markup, and styles is super helpful, especially in bigger projects where keeping context is key.
Typed styles are another big win here. With them, you can make sure developers only use valid class names and values, reducing errors and keeping everything consistent. Plus, CSS in JS frameworks makes reusing styles a breeze, so you can easily share consistent styling across your app.
What really sets CSS in JS apart, though, is its support for dynamic styling. You can use props or JavaScript values to adjust styles on the fly, making your components much more flexible.
And don’t forget critical CSS—it ensures only the styles you need for a specific page are loaded, which can make a huge difference in performance. Some frameworks, like Linaria and Vanilla Extract, even let you output styles that feel very CSS-modules-like but with added perks.
Bottom line? CSS Modules are awesome for certain use cases, but CSS in JS really shines when you need dynamic styling, better performance, and a smoother development workflow.
Hope this clarifies your thoughts and was happy to help. Let me know if you still face issues understanding the concept .
Amazing share by @charity-majors and @Rashmihasija
I also would love to add and share my thoughts as I personally refer to using CSS in JS more often.
CSS Modules are great, but CSS in JS takes things to another level with features that really cater to modern web development. One of its biggest strengths is combining your styles, markup, and logic into a single file. This makes your components self-contained and way easier to work with, especially in large apps where keeping track of everything can get overwhelming.
Another standout feature is dynamic styling. CSS in JS makes it super simple to change styles based on props or JavaScript values. This opens the door for more reusable and flexible components. On top of that, frameworks like Emotion and StyleX even support typed styles, which help enforce consistency by ensuring only valid class names or values are used.
From a technical standpoint, CSS in JS solves common problems like scoping issues and leftover styles. It can automatically remove unused CSS, and it supports critical CSS loading—so your pages load only the styles they actually need. What’s even better is that many modern CSS in JS libraries come with minimal or no runtime overhead, so you’re not sacrificing performance.
To sum it up, CSS in JS is about more than just styling—it’s a powerful tool for creating efficient, dynamic, and developer-friendly applications. If your project needs features like dynamic styling or critical CSS, it’s worth considering over the CSS Module.
For more clarity, follow these blogs on CSS in JS and CSS modules
Hope I was helpful 