This content originally appeared on CSS-Tricks and was authored by Chris Coyier
I’m not the biggest fan of Atomic CSS myself. I don’t like all the classes. I like to express my styles in CSS because I find CSS… good. But I appreciate that a lot of people seem to like it, and it does have some clear advantages, like the fact that the generated stylesheet is generally smaller than hand-rolled CSS authored other ways—plus, the available classes are like guardrails that ensure more consistent usage in a design system.
I also appreciate that innovation is happening in this space. It seems to have gone from:
Here’s a billion classes you can use, but hey, at least the CSS is still fairly small and won’t change!
To:
Yes, that, but we’re going to strip away the ones you aren’t using.
And now:
We’re going to generate the stylesheet on the fly based on what you do use.
Anthony Fu breaks down this history nicely in “Reimagine Atomic CSS” where he then throws his hat in the ring taking things one step further with UnoCSS. I can’t say I fully understand it all, but it looks like it can do anything that its predecessors can do but more, largely via rule configurations. It’s also fast (based on vite), and I’m always a fan of fast tools—especially where the goal is a tightly authored feedback loop.
It looks rather complex to me and seems to have limited integrations. I’m not a fan of the bit that turns styles into arbitrary HTML attributes. If they were, like, JSX props, that’s fine. But I think HTML attributes that go all the way to the DOM are dangerous and should be data-* scoped.
At the same time, I always like it when people think through problems and share their thought processes for solving them like Anthony has done here. Plus, there is a playground and that’s fun.
To Shared Link — Permalink on CSS-Tricks
The post Reimagine Atomic CSS appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-11-19T22:01:05+00:00) Reimagine Atomic CSS. Retrieved from https://www.scien.cx/2021/11/19/reimagine-atomic-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.