4 ms·

Honestly, I think the CSS-in-JS approach is not for me and we haven't used it except for times where there was no other way to do something. Instead we have us

by akuji1993 8y ago

Honestly, I think the CSS-in-JS approach is not for me and we haven't used it except for times where there was no other way to do something. Instead we have used CSS Modules (https://github.com/css-modules/css-modules https://github.com/css-modules/css-modules), first by including it manually in webpack, now it's already built into create-react-app so I just have to install node-sass and call my Sass files ComponentName.module.scss and I can use them the same way in my .tsx/.jsx files that you use CSS-in-JS. IMO that's a lot less messy and makes your jsx files smaller and better to read. Also it's easier to write Sass and have the pros of that language on top. Did you consider this approach at all and what did you not like about it?

daliusd 8y ago
Bonus point: you get hot reload while editing CSS.
exogen 8y ago
While different from Styled Components, many people still consider CSS Modules to be squarely in the realm of CSS-in-JS. It literally generates a JavaScript module that you must import into another JavaScript module in order to actually use the CSS classes you write, after all. Having some experience with CSS Modules myself, I thought they were interesting and definitely an improvement, but still left a lot to be desired. For example: needing to use a helper like `classnames` to join/toggle many dynamic classes together was very ugly and cumbersome. There is also no way to "directly" tie variable state/props to CSS rules – you're still required to use this indirection where a state/prop relies on there being a predefined class/modifier in the CSS file. e.g. font-size: ${props => props.size}px; color: ${props => props.special ? 'red' : 'blue'}; With solutions closer to the "fully JS" end of the spectrum like Styled Components, there are no extra "modifier" CSS selectors to come up with to handle the above situation.

daliusd 8y ago

Bonus point: you get hot reload while editing CSS.

exogen 8y ago

While different from Styled Components, many people still consider CSS Modules to be squarely in the realm of CSS-in-JS. It literally generates a JavaScript module that you must import into another JavaScript module in order to actually use the CSS classes you write, after all. Having some experience with CSS Modules myself, I thought they were interesting and definitely an improvement, but still left a lot to be desired. For example: needing to use a helper like `classnames` to join/toggle many dynamic classes together was very ugly and cumbersome. There is also no way to "directly" tie variable state/props to CSS rules – you're still required to use this indirection where a state/prop relies on there being a predefined class/modifier in the CSS file. e.g. font-size: ${props => props.size}px; color: ${props => props.special ? 'red' : 'blue'}; With solutions closer to the "fully JS" end of the spectrum like Styled Components, there are no extra "modifier" CSS selectors to come up with to handle the above situation.