DEV Community

loading...

Discussion on: Scoped CSS for React Components with TypeScript

Collapse
merri profile image
Vesa Piittinen

In a bigger project over time you don't want to have your CSS mixed with JavaScript. There are two big reasons for this:

  1. Maintenance and code readability suffer: the components become too big and verbose. When dealing with styles you want to focus on styles, when dealing with code you want to only see the relevant code. You could solve it by making style-only components and logic-only components, but if working with a team it is hard to keep the discipline.

  2. Performance becomes an issue. And it isn't only the executional performance, but code size and duplication. On client browser with CSS-in-JS you have the actual CSS, you have the JS building CSS, and you have the code that converts the JS interpretation to CSS.

CSS Modules don't have either of the issues, because CSS remains in it's own file, only relevant CSS gets bundled, and there is no runtime interpretation. Themes: use CSS variables.

Collapse
domnikl profile image
Dominik Liebler Author

Thanks for your input! I am still a learner in frontend tech and haven't worked on large projects (yet). So would you advise to start with CSS Modules or go for CSS-in-JS only when the project won't become large anyways?

Collapse
merri profile image
Vesa Piittinen

CSS-in-JS only if it won't become large. On large projects it is a constant struggle of fighting to have less JavaScript executing on client's browser, because you want to have a site that is fast to serve and fast to execute. Good metrics on these are good for both user experience and search engine ranking. And this is why building everything through JS is a bad idea.