We’re excited to announce the alpha release of Selur, a groundbreaking project poised to redefine how we build user interfaces. Selur introduces a Pure CSS UI Declaration Engine, aiming to fundamentally re-examine and restore the intended relationship between HTML, CSS, and JavaScript by bringing visual logic and stateful UI behavior back to CSS, where it truly belongs.
The Current Web Landscape – A Disconnect
The original promise of the web was clear: HTML for structure, CSS for presentation, and JavaScript for logic. However, modern web development often sees this contract broken. JavaScript frequently takes over presentation concerns with UI frameworks, CSS gets cluttered with utility classes mimicking structural elements, and HTML often devolves into generic, non-semantic containers. This entanglement creates inefficiencies and complexity.
Selur directly addresses this by re-establishing the foundational web contract, shifting all UI interactivity and visual state management back to the domain of pure CSS.
Under the Hood: Selur’s Core Principles
Selur isn’t merely a component library; it’s a visual architecture orchestrator built entirely in CSS. It leverages widely supported CSS features to offload UI work from the CPU to the GPU, leading to more performant and maintainable applications.
1. Zero Cosmetic JavaScript Runtime
This is a cornerstone of Selur. Dynamic UI behaviors, from slideshows and modals to complex responsive navbars, are powered by:
* CSS Custom Properties (Variables): These manage and expose all UI state (e.g., --state--: 0;), making state inspectable directly in DevTools.
* The :has() Pseudo-Class: Selur ingeniously uses :has() for intricate, autonomous CSS state management. It can detect child counts, positions, and states without requiring a single line of state-setting JavaScript.
* Native Browser States: Leveraging built-in pseudo-classes and dynamic HTML elements like <details> or <dialog>.
The outcome? You can achieve core interactivity with zero JavaScript.
2. Prioritizing Semantic Architecture
Selur embraces native HTML elements first, enhancing them before introducing semantic attributes to fill any gaps.
* Elements like **<button>**, **<details>**, **<figure>**, etc., are enhanced out of the box, applying designs defined through CSS variables.
* More complex widgets such as hamburger menus, responsive navbars, sequential animations, and 3D carousels are defined using data-widget and data-type attributes, alongside other data attributes as needed for visual objects.
3. Total Control, No Abstraction Layers
Adopting a “WYWIWYG” (What You Write Is What You Get) philosophy, Selur avoids shorthand helpers or utility classes.
* Developers work directly with property-mirroring CSS variables (e.g., --padding-left, --border-top-style).
* This approach, while trading some convenience, grants total, explicit control over every styling detail, resulting in a highly auditable system.
Why Selur Matters: Key Advantages for Developers
| Feature | Developer Benefit |
|---|---|
| Performance | Offloads UI logic to the GPU via native CSS. Eliminates JS reconciliation and expensive virtual DOM re-renders for visual state changes. |
| Maintainability | Self-documenting, semantic markup. No class-name bloat (e.g., .flex-col .items-center .p-4). All state is exposed via CSS variables. |
| Framework Agnostic | Works seamlessly with vanilla HTML, React, Vue, Svelte, etc. It reads the DOM and applies instructions—no lock-in, no required plugins. |
| Design Freedom | Aesthetics are fully controlled via CSS variables. Designers define themes; developers define structure, fostering clear separation. |
Important Considerations & Limitations
As a pure-CSS system, Selur comes with specific technical demands and trade-offs:
- CSS Custom Properties Dependency: Its reliance on CSS variables makes it incompatible with legacy browsers like IE 11 and older.
- Conditional Use of
:has(): While maintaining visual integrity, complex effects such as slideshows, responsive navbars, or sequential animations may lose some reactivity if the target browser doesn’t fully support:has(). In such cases, you might need to manually provide missing data (two to three variables) via HTML style attributes or JavaScript. - Strictness of Pure CSS: Selur offers no error handling, warnings, or runtime validation. It’s pure CSS and assumes correct input; any authoring mistake will directly reflect in the output.
Get Started with Selur Alpha Today
Selur is currently in its alpha phase, live and ready for testing with no build step required. We encourage you to explore it, provide feedback, and join us in advocating for presentation logic to return to its rightful place in CSS.
- NPM: https://www.npmjs.com/package/selur
- JSfiddle (Demo): https://jsfiddle.net/tdjdev/jwh5pqyv/159/
- Gitlab Repository: https://gitlab.com/tdj.dev/selur
- Wiki/Documentation: https://gitlab.com/tdj.dev/selur/-/wikis/home
What are your thoughts on this innovative approach? Share your insights in the comments!