5 ms·
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 wit
by HugoDaniel 9y ago
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.
- reaperducer 9y agoAn 84K CSS file. Well, I guess that's one way to get fired.
- HugoDaniel 9y agoYes, 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/ https://www.keycdn.com/support/the-growth-of-web-page-size/
- talmand 9y ago>> 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.
- haukur 9y agoIf 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" />`).
- HugoDaniel 9y agoDoesn't it break the separation of concerns ? JSX is already a big red flag in that respect.
- barryhoodlum 9y agoThe separation of concerns is an illusion anyway. See hacker_9's comment.
- HugoDaniel 9y agoSo 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.
- 0xFACEFEED 9y agoWhat concerns? JSX is for writing UI code and CSS is part of the UI.
- HugoDaniel 9y agoAnd 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.
- deleted 9y ago[deleted]
- andrewingram 9y agoMost of us know about it, and don't see an advantage to it that outweighs the many advantages of doing CSS-in-JS.
- enkay 9y agoAtomic 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.