CSS Gets a Class Prefix Selector to Simplify Targeting Multiple Classes
The Future of CSS: Target Multiple Classes with the Class Prefix Selector
The CSS Working Group has resolved to add a Class Prefix Selector (`.prefix-*`) to Selectors Level 5, allowing authors to target all classes sharing a prefix without brittle attribute selectors or extra base classes. Proposed by Lea Verou, the selector matches classes like `.btn-primary` and `.btn-secondary` with just `.btn-*`. It currently only supports hyphen separators, and empty or double-hyphen prefixes are excluded. Browser support is nonexistent, but feature detection via `@supports` is possible.
The `-*` part at the end makes the selector a **Class Prefix Selector** and will try to match any class that begins with that hyphen-separated prefix.
- jjcm
In their example, they list btn-* as the selector catch all for .btn-primary|secondary|danger. I can't help but think why not just do, .btn.primary for the class name, and just target .btn with the selector?
Don't get me wrong, I appreciate the convenience of this, but I do worry about selector slowdown with what will effectively turn into a regex at some point. I'm dubious that this is needed.
- dymk
Personally, I don't think this is a great change to CSS. I prefer being able to grep for identifiers to see where they're used. Now you can't rely on that - maybe a rule is now covered by a prefix selector.
- yeargun
Hey,
I don't like Browsers to go CISC way. Simpler -> finer ?
Why?
Any feature that we add up indeed cause some extra CPU cycle. I am not a believer that we need an extra regex like this.
Of course, the overhead caused by this is minimal, so is the benefit. Also very tiny percent of web apps will use this anyways.
It could make the shipped css/js to some extent.
Overal I don't like this tradeoff. I dont want web to have more fanout