search

cjss-group / CJSS

A CSS based web framework
https://cjss.js.org/
MIT License
670 stars 20 forks source link

PSA: CSS in JS also a bad idea #4

Open acobster opened 5 years ago

acobster commented 5 years ago

This project made me laugh with mirth, and cry in pain. And then I thought about it. This is actually useful in that it proves the point that CSS and JS should remain as decoupled as possible.

So to anyone having a laugh at this repo and then shrugging it off to go back to your CSS-in-JS architecture, please read this: https://keithjgrant.com/posts/2015/05/against-css-in-js/

This has been a Public Service Announcement from your friendly neighborhood opinion-haver.

sdunham commented 5 years ago

Here we go

jabsatz commented 5 years ago

There are libraries like styled-components that address every single issue of that article. It does not create any lock-in problems since you actually write CSS in a template string, and it gets parsed exactly like you wrote it. It supports use from outside without it's use, since it works exclusively by creating classes and passing them through the className prop. You can pass a regular class and write some CSS, or you can style it through their own tools. It has every CSS feature since it actually writes CSS. It also has nesting built-in, which is not in CSS yet, but many other tried and tested style sheet languages like SASS have it.

And there ARE some downsides in CSS. If you work solo and you know what you're doing it may be easy to keep stylesheets short, but in a team it frequently happens that some rules apply not only to the things you're working on, but some other component buried deep in the app, since classNames match globally. When you encounter something like this, it's quite hard to erase unused rules, leading to a huge creep in stylesheets that I've seen to some extent in every single project I've worked on.

Styled-components for example, does not rely on this, since it creates a unique className for every component it creates. So when you see some CSS in one place, you can be absolutely sure it only affects that specific component.

All of this is without getting into all the advantages of having CSS-in-JS, like the capacity for easy theming and implementing different states for a component in a much more declarative way.

I understand the gut feeling when hearing CSS-in-JS, I had that too for a time, but it has evolved way past style objects in the past few years. It's easier both for "front-end devs" who can implement things like theming and "front-end designers" who can still work in the same CSS syntax they know.