3 ms·

It doesn't. But what it can encourage you to do is to stop writing CSS that has effects outside of the component it's attached to. Devs doing front-end have th

It doesn't. But what it can encourage you to do is to stop writing CSS that has effects outside of the component it's attached to. Devs doing front-end have this tendency to treat styling a page as some unsavory thing that they want off their plate as soon as possible. So they don't do any refactoring, and don't take any time to try to figure out the underlying concepts behind CSS. So you get these giant, append-only stylesheets that have no real rhyme or reason behind them. Putting CSS in your JS has the side effect of hopefully forcing you to think more carefully about what rules go where. It's no magic bullet of course, but localizing all the code to one component in one file can make everything just a slight bit more maintainable. There are real tradeoffs, of course. CSS in JS just isn't as mature as existing template solutions, and they don't yet let you do anything you want with them. Maybe it's a good thing.

exogen 8y ago
While that is a benefit, I think that's underselling it a bit. It certainly enforces more organization & discipline, but some benefits are more concrete and technical. :) For example: sending down only the critical styles needed to render a page. Many CSS-in-JS approaches get you this for free. If a component isn't rendered on the page, its CSS isn't on the page either. That can be technically challenging even if you follow the strictest, most disciplined patterns when writing your CSS in a traditional way. Another is guaranteeing no naming clashes. You could be extremely disciplined, but let's say there are 80 developers working on different parts of your large site/application. How are they going to know that some other developer in another group isn't adding selectors for another component with the same name, even if it's a very specific name and follows best practices? Solutions that mangle the class names to guarantee uniqueness automatically fix this. There are more, but those two come to mind immediately.
- vinceguidry 8y ago
  Agreed, thanks for elucidating.

exogen 8y ago

While that is a benefit, I think that's underselling it a bit. It certainly enforces more organization & discipline, but some benefits are more concrete and technical. :) For example: sending down only the critical styles needed to render a page. Many CSS-in-JS approaches get you this for free. If a component isn't rendered on the page, its CSS isn't on the page either. That can be technically challenging even if you follow the strictest, most disciplined patterns when writing your CSS in a traditional way. Another is guaranteeing no naming clashes. You could be extremely disciplined, but let's say there are 80 developers working on different parts of your large site/application. How are they going to know that some other developer in another group isn't adding selectors for another component with the same name, even if it's a very specific name and follows best practices? Solutions that mangle the class names to guarantee uniqueness automatically fix this. There are more, but those two come to mind immediately.

vinceguidry 8y ago
Agreed, thanks for elucidating.