Suppose a design system contains three classes: .btn-sm, .btn-md, and .btn-lg. When you want to apply shared margin to them, how do you write it?
Do you list all three, go around adding .btn across the HTML, or make do with an attribute selector like [class^="btn-"]? Whichever you choose, it breaks the moment someone adds .btn-xs six months later. Enumerations miss updates, HTML additions require modifying every existing template, and attribute selectors match unintended elements.
At the CSS Working Group meeting held in Berlin in August 2026, it was decided to add the class prefix selector .prefix-* to Selectors Level 5 for this very purpose. This was originally proposed by Lea Verou in 2024.
What the three current approaches each sacrifice
First, let us examine the current landscape. There are three common workarounds, but each sacrifices something different.
Enumeration. Writing .btn-sm, .btn-md, .btn-lg { ... }. While reliable in operation, it imposes an obligation to update every CSS location whenever a variation is added. The person adding a new size may not know which line of the stylesheet to modify, resulting in code being published without realizing the styles were never applied.
Adding a base class to the HTML. Structuring markup as class="btn btn-sm". While natural in BEM-style architectures, adopting this during renovations of existing sites means modifying templates, CMS outputs, and even HTML embedded inside historical article bodies. It also bloats markup.
Using attribute selectors. This is the most misunderstood approach. [class^="btn-"] only matches when the entire class attribute string begins with btn-. It misses class="card btn-sm" entirely. Consequently, practitioners resort to [class*=" btn-"], which then mistakenly matches unrelated classes such as class="icon-btn-sm".
| Approach | Failure mode |
|---|---|
| Enumeration | Updates are missed when adding variations |
| Adding base classes | HTML modifications expand across all existing templates |
| Attribute selector | Prefix matching fails with multiple classes; substring matching catches unrelated classes |
Note that the issue is not specificity. The specificity of an attribute selector is (0,1,0), identical to a class selector. The real trouble lies in readers being unable to infer developer intent and accidental matches across broader scopes.
Approved specifications and what remains undecided
In .prefix-*, the trailing -* signifies "any hyphen-separated continuation from here." Writing .btn-* matches both .btn-sm and .btn-lg, and automatically applies to any .btn-xs added later. You do not need to add anything to the HTML.
Regarding specificity, while not explicitly defined in the specification, the phrasing suggests it will be (0,1,0), matching class selectors. It is safer not to treat this as final until implementations appear.
There is a broader roadmap behind choosing -* as the syntax. The Working Group is aiming to harmonize wildcard syntax across all of CSS, allowing the same pattern to be reused in the future for attribute name wildcards like [data-*] or custom element extensions like my-framework-*.
Most importantly, there are currently zero browser implementations. What was agreed upon is inclusion in the specification; this does not mean you can start writing it tomorrow.
What you can decide today without waiting for implementation
If there are no implementations, does that mean there is nothing you can do? Quite the opposite. Whether this specification proves effective will be determined beforehand by how you name your classes. And you can change your naming conventions starting today.
- Standardize delimiters on hyphens.
.btnSmand.btn_smfall outside the scope of prefix selectors. For projects mixing camelCase and snake_case, aligning them now dictates whether you can leverage this feature in the future. - Align prefixes with semantic units. If
.btn-smand.btn-primaryshare the same prefix, you cannot target only sizes in bulk. Decide during the design phase whether to use something like.btn-size-smfor size-related styles or to separate the prefixes entirely. - Eliminate prefix collisions. Situations where one prefix is a substring of another—such as
.card-*and.card-header-*—cause bulk targeting to match unintended scopes. Compile an inventory of class names and identify any containment relationships.
If you use generated utility classes such as Tailwind or Bootstrap, these conventions are already established by the framework. Our thoughts on architectures mixing custom classes with framework utilities are compiled in Balancing Tailwind and Native CSS.
What teams delivering the code should document
When delivering websites in client web development, naming conventions vanish unless documented. This is especially true if the next person maintaining the code belongs to a different company.
At a minimum, leave a single-page correspondence table covering the list of prefixes and the variations each represents. With this in hand, successors can avoid deviating from conventions when adding .btn-xs. Deliverables for design system handoffs are also covered in Delivering Design Systems in an AI-Readable Format.
Additionally, we recommend identifying locations currently using [class^=] or [class*=] and annotating them with comments. This ensures that replacement candidates are immediately obvious whenever .prefix-* is implemented in the future.
What to do next
First, search for [class^= and [class*= across your local projects. The matched locations will be the primary candidates for replacement once this specification lands. If the count is zero, there is no rush; if high, revising your naming conventions should take priority.
Next, verify whether your class name delimiters are unified. If they are inconsistent, your team will be the only one unable to use the specification the day it is implemented.
GleamHub offers website CSS architecture, design system naming convention standardization, and legacy site renewal consultations through our Website Production and Renewal service. Because the approach varies depending on site scale and current structure, please consult with us individually. Feel free to reach out via Contact Us.
