Reimagine Atomic CSS

No Comments

I’m not the largest fan of Atomic CSS myself. I don’t like all of the lessons. I like to precise my types in CSS as a result of I discover CSS… good. However I recognize that lots of people appear to love it, and it does have some clear benefits, like the truth that the generated stylesheet is mostly smaller than hand-rolled CSS authored different methods—plus, the obtainable lessons are like guardrails that guarantee extra constant utilization in a design system.

I additionally recognize that innovation is going on on this house. It appears to have gone from:

Right here’s a billion lessons you should use, however hey, a minimum of the CSS continues to be pretty small and received’t change!


Sure, that, however we’re going to strip away those you aren’t utilizing.

And now:

We’re going to generate the stylesheet on the fly primarily based on what you do use.

Anthony Fu breaks down this historical past properly in “Reimagine Atomic CSS” the place he then throws his hat within the ring taking issues one step additional with UnoCSS. I can’t say I totally perceive all of it, however it seems to be like it will probably do something that its predecessors can do however extra, largely through rule configurations. It’s additionally quick (primarily based on vite), and I’m all the time a fan of quick instruments—particularly the place the objective is a tightly authored suggestions loop.

It seems to be fairly complicated to me and appears to have restricted integrations. I’m not a fan of the bit that turns types into arbitrary HTML attributes. In the event that they have been, like, JSX props, that’s positive. However I feel HTML attributes that go all the best way to the DOM are harmful and ought to be data-* scoped.

On the identical time, I all the time prefer it when individuals assume by way of issues and share their thought processes for fixing them like Anthony has completed right here. Plus, there’s a playground and that’s enjoyable.

To Shared HyperlinkPermalink on CSS-Tips

The submit Reimagine Atomic CSS appeared first on CSS-Tips. You’ll be able to help CSS-Tips by being an MVP Supporter.

    About Marketing Solution Australia

    We are a digital marketing company with a focus on helping our customers achieve great results across several key areas.

    Request a free quote

    We offer professional SEO services that help websites increase their organic search score drastically in order to compete for the highest rankings even when it comes to highly competitive keywords.

    Subscribe to our newsletter!

    More from our blog

    See all posts

    Leave a Comment