DEV Community

Discussion on: Why I don't like to use Styled-Components

Collapse
 
oenonono profile image
Junk

CSS in JS doesn't make sense, so there's that. My reasons for that include that CSS is a more declarative language than JS. We all agree declarative is good, because we agree React is good because it enables writing more declarative JS. So clearly a more declarative approach is better than a less declarative approach when it meets the purpose, which CSS does. It meets the purpose because it's a domain specific language for presentation and styling. And we all agree DSLs are good, because we agree React is good because it helps us implement DSLs for the apps we build. So clearly a DSL is better than a general purpose language when it meets the purpose, which CSS does. CSS is also better than JS for its purpose because of how browser engines deal with each language due to the clarity of their domain specific purpose. JS can be multi threaded now, but it always starts in and is orchestrated from the single main UI thread. When JS orchestrates everything, performance is bottlenecked on JS parsing, and execution in a single thread, which is slower than CSS. CSS in JS is re-implementing the browser engine in a slower language in the single UI thread users get to provide their interactive functionality.

Collapse
 
dorshinar profile image
Dor Shinar

And what if I told you that SC actually generates regular CSS stylesheets? Because it does.
And yes, JS is single threaded, but if it can run the most popular websites on the internet, I guess it's good enough.
So no, CSS-in-JS is not "re-implementing the browser engine in a slower language" any more than React is "re-implementing the browser engine [html rendering] in a slower language".

Collapse
 
oenonono profile image
Junk • Edited

A browser engine is not just HTML, that's kind of the point.

It's not good enough. Even if it were sometimes, it's not all the time, and we'd be able to improve on it someday. But it's really not. Where have you been the last decade as JS dramatically bloated the network transport size of web UIs and spiked their startup and runtime CPU and memory requirements just as mobile devices were becoming a norm?

Oh, you mean it works on your machine? I bet it does! If it didn't, would you keep using it? Yeah. Neither will end users. And it doesn't work on their machines.

Why so many application engineers I encounter are stubbornly defensive about this subject despite the fact that (a) this is measurable and significant research and evidence is freely available (b) engineers who architect and implement web browsers and their underlying engines are among the ones who have been telling you this for years. And not because they are killjoys who want us all to fail. What kind of reasoning is, "everyone else does it so it must be fine!" Give me that and a quarter and I'll have exactly 25 cents.

Collapse
 
ucvdesh profile image
Daniel Silva • Edited

I can't agarre more...the performance is something that decrease using css in js

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

CSS in JS doesn't make sense, so there's that

Why not? The DOM has native methods for generating styles programmatically and inserting them into a document. It's not a new concept, even though it's been popularized and made easier by JS frameworks.

I highly recommend styled-jsx—it's basically just CSS.

Collapse
 
oenonono profile image
Junk • Edited

Everything I said as well as several other things I haven't. Any solution to which what I said does not apply (such as shipping CSS that is not in JS or writing CSS that is not in JS or both) is categorically not what I am referring to. How much one considers writing a semi-sorta-vanilla CSS/JS hybrid embedded in JS, composed as special React components wrap or hooks control rather than as standard CSS composes onto nodes, and distributed as runtime-compatible CSS only after passing it through a stack of tools as "CSS" or as "CSS in JS" I cannot dictate.

PS: That particular approach is certainly one of the better in several ways. It's not as if I don't use CSS in JS sometimes. That's why I have an opinion on it.