I am a big fan of CSS-in-JS especially styled-components but in this article i want to discuss about disadvantages of using CSS-in-JS.
- Difficulty to learn for the devs who are new to react syntax.
- The class names themselves are dynamically generated, too, essentially breaking caching as things can change between builds/renders.
- Css-in-js parses all the style definitions into plain vanilla CSS and put everything inside
styletag inindex.htmlfile. This will increase html file size. - Adds lots of unnecessary code while parsing to vanilla css.
- Browser will not start interpreting the styles until styled-components has parsed them and added them to the DOM, which slows down rendering.
- Most of the UI libraries and frameworks won't support this approach.
- We can't use other css utilities like SCSS, LESS and PostCSS.
Top comments (3)
I've never been a fan of putting CSS inside components: usually, there's like 5% of CSS that is truly specific to a component, mostly regarding its internal layout. But most of the CSS of a component tends to be global: link and button styling, font and background colours, etc.
CSS in JS is the type of hammer that turns everything into a nail, thumb and screw alike. It makes it neither easier not more convenient, to overzealously put too much styling inside a component, but it makes it feel "right" more than it actually is.
Encapsulation is almost always good in programming, but styling is one of the rare cases where we should be fighting against that intuition.
Thanks for the article!
When I had to use CSS-in-JS in a React project, the automatically generated class names prevented getting quick insights in the browser dev tools, as nobody knew which code actually generated them. I know that there is a setting or plugin to generate human-readable class names in dev environments, but for some reason that did not work in our setup.
Another downside to CSS-in-JS using React props and template strings was that CSS code inspection did not work properly anymore. Maybe there is a proper setup to use
stylelintfor this kind of CSS code, but we did not set it up yet, so all of the CSS code missed linting and nobody seemed to care.Based on this experience, I strongly dislike CSS-in-JS, but hopefully I am wrong and it was just due to our careless setup. Anyway, CSS is a great and powerful language, and it can work even better using the cascade where it makes sense, instead of encapsulating everything into components just for the sake of the principle.
Difficulty to learn : i agree with you if we use template string it will easy to understand for beginners but in my first project when i was new to
reactandstyled-componentsi got confused withstatic objectsandAdapting based on propsand i seen those in lot of places at that time.About Config: It may or may not fit for project setup and framework we use.