#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
In a bigger project over time you don't want to have your CSS mixed with JavaScript. There are two big reasons for this:
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.
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.
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?
#ActuallyAutistic web dev. Does front of the front-end. Loves perf and minimalism. Prefers HTML, CSS, Web Standards over JS, UX over DX. Hates div disease.
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.
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.
In a bigger project over time you don't want to have your CSS mixed with JavaScript. There are two big reasons for this:
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.
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.
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?
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.