This content originally appeared on DEV Community and was authored by Adetayo Adeniyi
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>
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>
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.
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!
This content originally appeared on DEV Community and was authored by Adetayo Adeniyi
Adetayo Adeniyi | Sciencx (2025-11-28T20:51:16+00:00) Stop fighting your build tools. Meet AtomAttr.. Retrieved from https://www.scien.cx/2025/11/28/stop-fighting-your-build-tools-meet-atomattr/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.