DEV Community

Discussion on: What is Your Opinion about CSS(-in-JS)?

Collapse
 
rhymes profile image
rhymes

I don't know what it is but I have opinions which make me the most dangerous type of human being right now :D

What constitutes CSS-in-JS? Is the <style> section of a Vue component CSS in JS too?

I think it makes sense in a context of a SPA even though I'm not actually sure what's the benefit of having "scriptable" CSS beyond SASS (but I've never maintained a huge frontend app so my view is definitely limited).

I googled "css in js" and found the benefits from this article: hackernoon.com/all-you-need-to-kno...

Thinking in components — No longer do you have to maintain bunch of style-sheets. CSS-in-JS abstracts the CSS model to the component level, rather than the document level (modularity).

what's wrong with having Component.js and Component.css side by side? Is it that bad you need an entire library to solve this?

CSS-in-JS leverages the full power of the JavaScript ecosystem to enhance CSS

why do we need the full power of JavaScript for cascading style sheets?

“True rules isolation” — Scoped selectors are not enough. CSS has properties which are inherited automatically from the parent element, if not explicitly defined.

Ok this seems "fairish".

Scoped selectors — CSS has just one global namespace. It is impossible to avoid selector collisions in non-trivial applications.

Ok, even though decent third party CSS are scoped and BEM or similar constructs have been around for a long time.

Unit tests for CSS!

This is cool I guess!

The drawbacks listed in the article are the learning curve, more dependencies and the learning curve again.

I'm not against it by principle (I mean if you're already doing a SPA that requires JS for all of it...) but is it worth it the effort?

Sorry, mine are questions, not really answers :D

All this complexity made me think of this post: