Re: [csswg-drafts] [selectors] New class prefix selector to facilitate utility classes (`.prefix-*`?) (#10001)

> the exact separator used is semantically meaningful, and `-` is different from `--`.

Thank you for the correction - in that case, let me illustrate the other side of the coin with an example. Let's say an author has a range of button classes, like `.btn-primary` class and `.btn--large`. They are separating these functional meanings (`-primary`, `-secondary`, `-destructive`, etcera) from purely visual modifiers (`--large`, `--rounded`, `--gradient`, etcetera). I would think it is reasonable for such an author to assume that `.btn-*` selects all of the above, since they're all still very much under the `.btn-` umbrella. But if at some point no functional class is needed and this author writes `<button class="btn--large">`, they're in for a surprise to find out they actually needed a `.btn-*, .btn--*` selector.

The semantics you describe ("the exact separator used is semantically meaningful") are something that this draft spec adds retroactively to all existing code. I disagree with the nuances of these semantics no matter which way the spec decides to go, because these semantics were always up to authors to choose. CSS and HTML defined classes as generic identifiers, and authors have found their own style in naming them to fit their project. This draft invalidates choices authors have made, albeit without functional consequences.

> how do you see the situation being any different if people use a `class="region region-sidebar"` approach and select on `.region`?

Not to put words in @wesruv's mouth, but the way I understand their example is that this syntax would encourage users to leave out the `.region` class altogether and select things like `.region-navbar`, `.region-sidebar`, `.region-footer`, etcetera. with just `.region-*`. But that then accidentally also selects `.region-name`. With the current `class="region region-sidebar"` strategy, authors don't have this problem, because they can safely use `.region` assuming they didn't also use the `.region` class on their `class="region-name"`. Really this comes back to the crux of the issue I have with this proposal; a `.region` class puts all the relevant elements in the same bucket. It does so explicitly and safely. The example does well to illustrate a `.region-*` selector is an inappropriate shortcut in this scenario, and authors will always have to keep this in the back of their mind.


-- 
GitHub Notification of comment by vrugtehagel
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10001#issuecomment-5379599209 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 22 August 2026 09:42:11 UTC