Hacker News Reader

Comment by HugoDaniel | Hacker News Reader

How many of people that argument in favor of the CSS in JS know about the Atomic CSS approach ?

It is currently the best of both worlds, you can control it with JS in a proper semantic way (through class setting) while keeping 0% replication and loose coupling between concepts.

It also is easily extensible and composes very well. The downsides are that your CSS file is going to be a bit bigger than usual (tachyons.io with all modules goes about 84KB uncompressed, 17KB gziped). But that can be quite irrelevant in big JS oriented projects where most of the size is occupied by big libs.

View on HN

If you're interested in this approach, check out Pete Hunt's jsxstyle or Kent C Dodds' glamorous. Both allow you to pass in props that map to css rules (e.g., `<Flex justifyContent="center" />`).

Doesn't it break the separation of concerns ? JSX is already a big red flag in that respect.

The separation of concerns is an illusion anyway. See hacker_9's comment.

So are most things in life. While we want to explain how everything is a different thing let's not forget that breaking most abstractions entails a valid point is being raised. I don't agree with almost all of the hacker_9's opinion, but that is just my opinion, which does not automatically make it a valid opinion.

A single thing covered in names.

What concerns? JSX is for writing UI code and CSS is part of the UI.

And we are all miserably part of your existence. Which does not imply that we should not be viewed as separate entities with different beliefs, desires and ways of reacting/interacting to the noise around us.

An 84K CSS file. Well, I guess that's one way to get fired.

Yes, but that is all the CSS you will ever need to have.

If you assume an average of 2.3MB[0] on the common page, that is about 3% of your project size for CSS that will not grow past that (atomic approach implies that you won't change it as we add more styles to your page(s)).

[0] https://www.keycdn.com/support/the-growth-of-web-page-size/

>> Yes, but that is all the CSS you will ever need to have.

Just make sure everybody else in the company is on board with that thought.

Atomic CSS sounds great until you actually try it on a big project and you run into all sorts of issues. Mostly that your html ends up looking like a total mess which slows down the rest of your work, and that it's not flexible enough.

Most of us know about it, and don't see an advantage to it that outweighs the many advantages of doing CSS-in-JS.

Reply on news.ycombinator.com