Hello Dev.to! I’m excited to announce the Alpha release of Selur, a project that fundamentally re-examines the relationship between HTML, CSS, and JavaScript.
Selur is a Pure CSS UI Declaration Engine. It doesn’t only give you components; but also the missing architectural layer that puts visual logic and stateful UI behavior back into CSS, where it always belonged.
The Broken Promise We’ve All Accepted
The original web contract was simple: Structure (HTML) -> Presentation (CSS) -> Logic (JavaScript)
But today, we often see JavaScript handling presentation (UI frameworks rendering DOM elements), CSS getting polluted with utility classes that mimic structural concerns, and HTML becoming generic, non-semantic containers.
Selur re-establish…
Hello Dev.to! I’m excited to announce the Alpha release of Selur, a project that fundamentally re-examines the relationship between HTML, CSS, and JavaScript.
Selur is a Pure CSS UI Declaration Engine. It doesn’t only give you components; but also the missing architectural layer that puts visual logic and stateful UI behavior back into CSS, where it always belonged.
The Broken Promise We’ve All Accepted
The original web contract was simple: Structure (HTML) -> Presentation (CSS) -> Logic (JavaScript)
But today, we often see JavaScript handling presentation (UI frameworks rendering DOM elements), CSS getting polluted with utility classes that mimic structural concerns, and HTML becoming generic, non-semantic containers.
Selur re-establishes this contract by moving all UI interactivity and visual state management back to pure CSS, where it truly belongs.
🛠️ How Selur Works (The Core Principles)
Selur isn’t a component library; it’s a visual architecture orchestrator written entirely in CSS. It relies on features that are now widely supported to offload UI work from the CPU to the GPU.
1. Zero Cosmetic JavaScript Runtime
This is the main driver. All dynamic UI behavior (slideshows, modals, complex responsive navbars) is powered by:
- CSS Custom Properties (Variables): Used to expose and manage all state (e.g.,
--state--: 0;). All state is inspectable in DevTools. - The
:has()Pseudo-Class: Selur uses:has()for complex, autonomous CSS state management. It can detect child count, position, and state without requiring a single line of state-setting JS. - Native Browser States: Leveraging pseudo-classes, and dynamic elements like
<details>or<dialog>.
The result? You use zero JavaScript for core interactivity.
2. Semantic-First Architecture
You don’t fight against arbitrary utility classes or custom tags. Selur uses native HTML elements first before creating semantic attributes to add what’s missing:
<button>,<details>,<figure>, etc., are enhanced out of the box and apply the design you’ve defined through variables.- hambuger menus, responsive navbars, sequential animations and even generics 3D carousels are defined with
data-widget,data-typeand potentially more data attributes based on the visual object needs.
3. Total Control, No Abstractions
Selur embraces a “WYWIWYG” (What You Write Is What You Get) philosophy. You won’t find shorthand helpers or utility classes.
- You work directly with property-mirroring CSS variables (e.g.,
--padding-left,--border-top-style). - This trades the convenience of utility classes for total, explicit control over every detail of the styling, making the system incredibly auditable.
🔥 Key Advantages for Developers
| Feature | Developer Benefit |
|---|---|
| Performance | Offloads UI logic to the GPU via native CSS. No JS reconciliation or expensive virtual DOM re-renders for visual state changes. |
| Maintainability | Self-documenting, semantic markup. No class-name bloat (.flex-col .items-center .p-4). All state is exposed via CSS variables. |
| Framework Agnostic | Works with vanilla HTML, React, Vue, Svelte, etc. It reads the DOM and applies instructions—no lock-in, no required framework plugins. |
| Design Freedom | Aesthetics are fully controlled via CSS variables. Designers define themes; developers define structure. |
🛑 Limitations and Trade-offs (The Fine Print)
As a pure-CSS system, Selur makes specific technical demands:
- CSS Custom Properties Dependency: It relies entirely on CSS variables, making it incompatible with legacy browsers (like IE 11 and older).
- Conditional Use of
:has(): While keeping visual integrity, complex effect like slideshow, responsive navbar or sequential animation will loose their reactivity. If your target browser doesn’t fully support:has(), you may need to manually provide missing data (two to three variables) via HTML style attributes or JS. - Zero Runtime Forgiveness: Selur has no error handling, warnings, or runtime validation—it’s pure CSS. If your authoring is incorrect, the output will reflect that mistake. It assumes correct input.
🚀 Try Selur Alpha Today
Selur is currently in alpha, but it’s live and ready to be tested, with no build step required.
We invite you to check it out, give us feedback, and join us in putting presentation logic back where it belongs: in CSS.
What are your thoughts on this approach? Let us know in the comments!