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 stylelint for 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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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.