Write CSS semantics once.
Run on any framework.
as-cssdo is a proposed CSS abstraction standard. A framework-agnostic data contract that maps semantic component classes to any CSS framework — Bootstrap, Tailwind, Bulma, Foundation and beyond. Change the framework. Keep the templates.
This page documents the concept as it was conceived. It is a pre-specification — a starting point for discussion, not a finished product. The ideas here are intentionally open.
One data object. Every framework speaks it.
The problem
Framework lock-in
Templates that use framework classes directly are tightly coupled. Switching from Bootstrap to Tailwind means rewriting every template, every component, every page.
No shared vocabulary
Every framework has its own naming for the same concept. A "primary button" is btn btn-primary in Bootstrap, btn-primary in Bulma, a utility composition in Tailwind. There is no standard.
Repeated migration work
Every project that changes its CSS framework starts the migration from zero. The same mapping problems are solved over and over, by different teams, in different ways.
The concept
A semantic data contract
as-cssdo defines a standard set of semantic component identifiers — button.primary, card.base, alert.warning — and a structured data object that maps each identifier to its implementation in any CSS framework.
The contract is the standard. The implementations are adapters. Frameworks provide their own adapter — or the community does.
Framework adapters
Each framework has an adapter file that implements the contract. Switching frameworks means swapping one adapter for another. Templates use s-btn-primary — never the framework class directly.
How it works — step by step
The contract defines semantic identifiers. button.primary means "the main call-to-action button" — framework agnostic.
Each adapter maps every identifier to its framework-specific classes or utility composition.
A compiler reads the contract + adapter and generates the CSS output — a stylesheet of semantic classes ready to use.
Templates use only semantic classes. To switch frameworks: swap the adapter, recompile. Templates untouched.
Ecosystem fit
The AS Starter is a live demonstration of as-cssdo in action. Its semantic layer (s-* classes) follows the as-cssdo contract, currently mapped to Bootstrap. It proves the concept works in a production application.
as-cssdo lives under the assist-series ecosystem — independent, open to contribution, but backed by a working implementation. assist-series provides the infrastructure and the credibility.
The long-term vision: framework authors contribute and maintain their own adapter. Being part of the as-cssdo standard means their framework is accessible to every project that uses the contract.
Roadmap — concept to standard
Proof of concept
- Define the semantic identifier set
- Bootstrap adapter — complete mapping
- Compiler prototype
- Live demo via as-starter
Multi-framework
- Tailwind adapter
- Bulma adapter
- Adapter contribution guide
- Documentation site
Community
- Open source release
- npm package
- Framework author outreach
- Versioned standard spec
Standard
- Framework authors maintain adapters
- IDE tooling
- Build tool integrations
- as-cssdo spec v1.0
Open questions
This is a pre-specification. The following questions are deliberately left open — they define the discussion, not the answer.
Interested in this idea?
This concept is in its earliest stage. If you work on a CSS framework, build developer tools, or simply find this idea worth pursuing — reach out. The standard will be shaped by the people who use it.