DEV Community

Cover image for Stop fighting your build tools. Meet AtomAttr.
Adetayo Adeniyi
Adetayo Adeniyi

Posted on

Stop fighting your build tools. Meet AtomAttr.

#css #javascript #webdev #opensource

For years, frontend development has been dominated by the build step. Webpack, Rollup, Vite, PostCSS... the list goes on.

While tools like Tailwind CSS revolutionized how we style apps, they introduced a heavy dependency on Node.js environments. If you are a backend developer (PHP, Python, Go) or just want to prototype a quick idea, setting up a full frontend toolchain feels like overkill.

I asked myself: What if you could just write HTML?

So I built AtomAttr.

⚛️ What is AtomAttr?

AtomAttr is a runtime CSS engine.

Instead of compiling your CSS at build time, it compiles it in the browser, instantly. It uses a MutationObserver to watch your DOM and injects atomic CSS rules only for the attributes you actually use.

It weighs less than 10kb, has zero dependencies, and requires no config.

⚡ How it works

You drop one script tag in your header. That's it.

<script src="[https://unpkg.com/quanta-atomattr/dist/atomattr.min.js](https://unpkg.com/quanta-atomattr/dist/atomattr.min.js)" defer></script>
Enter fullscreen mode Exit fullscreen mode

Then, you style using attributes instead of classes:

HTML

<div flex center h="screen" bg="slate-900">
    <div bg="white" p="8" radius="xl" hover-scale="1.05" transition="all">
        <h1 text="indigo-600" size="2rem">Hello World</h1>
        <p text="slate-500">No build step required.</p>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Features at a glance:

  • Atomic Syntax: p="4", m="auto", flex, grid.
  • Responsive: Mobile-first breakpoints (md-, lg-, xl-).
  • Stateful: Built-in interaction states (hover-, focus-, active-).
  • Dark Mode: Native support via dark- prefix.
  • Arbitrary Values: Need a specific width? Just write w="350px". The engine handles it.

🚀 Why Runtime?
"Isn't runtime CSS slow?"

Actually, no. AtomAttr uses CSSStyleSheet.insertRule(), which modifies the browser's internal CSSOM directly. It does not parse text or trigger heavy layout thrashing like older methods. The performance impact is negligible (sub-10ms) for even complex pages.

🛠️ Try it out
I built a playground where you can test the engine live without leaving your browser.

Live Playground

Documentation

GitHub Repo

I'm looking for feedback from the community. If you hate build steps as much as I do, give AtomAttr a spin and let me know what you think!

Top comments (0)