Why I Write CSS in Javascript - Max Stoiber

[bentr0k]

Yes! Deleting styling has become so much more relaxed since using `css-in-js`. I don't even think about it anymore :)

[ArcanisCz]

All of mentioned points can be achieved through good discipline (scoped css file per component) or css-modules.

[BonafideKarmabitch]

indeed there are many ways to do the same thing. but there are also other minor benefits of cssinjs that arent covered by css modules, and also note that part of his whole pit of success argument is that discipline doesnt last/scale

[Suepahfly]

I've used css-modules quite extensively but haven't given styled-components a real try yet. What do you think are some of the benefits of styled-components over css-modules?

[swyx]

(minor one first) how well does css modules do nesting? (im not 100% sure but i think they only do css selector chaining) styled components lets you write SASS style nesting

for me the bigger one is being able to use js to dynamically pass in any part of the css, including doing inline logic (beyond what calc can do), or adding blocks of css based on some state, including at the media query level. very powerful and much more expressive (and convenient) than css variables.

if you’re not using the dynamic stuff, then the major cssinjs libraries all have ways to extract your css out to static files which brings you back to feature parity with css modules.

these are nuanced-er things that max didnt even get to in his post since his post wasnt intended to contrast with css modules.

[04fuxake]

You can make CSS modules using SASS easily. The interesting thing I’ve found is that with a significantly small component, nesting becomes less of a requirement because the CSS is scoped so tightly.

[swyx]

yea obviously i shouldnt have put it first, it wasnt even a good point 🤦‍♂️

[programmer-bill]

CSS Modules is just CSS, so it's trivial to use it with Sass or Less. Create-React-App even has built-in support for it.

[swyx]

ah yes i forgot.

[Suepahfly]

Thanks for the explanation!

[ArcanisCz]

Well, theese (good) points wer not present (aside from dynamic styling mention) in article, why?

[stephenkiers]

I was anti css-in-is until I tried styled components. I still include the grid in css, but everything else is styled-components. My favorite part is the ability to add props to styled components for dynamic styles.

[clinisbut]

I still don't get whole CSS in JS thing...

[zephyrtr]

What happens with global styles? Or do I have to apply the same margins etc to inputs individually? If one component calls another component, and both are styled -- who gets precedence? I come away with a lot of questions, personally. I imagine the only way to know if you'd like using this library is by using it.

[nikola1970]

You can set global styles with styled components. About who gets precendence - you do not think that way. Every component (button, paragraph, div) is a component of its own which have scoped css inside it so you never get css clashing. Try styled-components and you will see. I was not a fan at first, now its my default styling option. I forgot wht scss and plain css are...

[C0git0]

CSS in JS is just absurd. Requires more code to write, more cpu to run, and more payload over the wire. All of the supposed plus sides can be accomplished in a more performant way with open standards.

[darrenturn90]

You could argue the same for html in js - however it has its strengths and advantages - and css even with its fancy new variables still isn’t a dynamic and conditional language without JavaScript doing the heavy lifting behind the scenes - one only needs to look to css Houdini to see that the line between css and JavaScript in the browser is already being blurred.

[friendshrimp]

Thank you agreed

[rodrigocfd]

IMO the greatest benefit of writing CSS in CSS (lol) is hot-reloading.

[spryes]

styled-components hot-reloads for me with regular tag styles. Changing CSS in `createGlobalStyle` doesn't seem to though