[csswg-drafts] [selectors] New selector to facilitate utility classes (`[name~^=value]`? `.prefix-*`?) (#10001)

LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [selectors] New selector to facilitate utility classes (`[name~^=value]`? `.prefix-*`?) ==
_(I’d be surprised if this has not been proposed before, but I was not able to find anything)_

## Pain point

It is very very common to use classes with a shared prefix as to specify key-value pairs. For example:

- [Tailwind](https://tailwindcss.com/), [Bootstrap](https://getbootstrap.com/) and other frameworks use classes like `pt-6` or `space-y-4` to specify their styles
- Icon families like [FontAwesome](https://fontawesome.com/) and [Bootstrap Icons](https://icons.getbootstrap.com/) use utility classes like `fa-*` / `bi-*` respectively to specify their icons.
- Authors often create such utility classes of their own.

Usually these utility classes have commonalities shared across all instances, as well as declarations that are specific to the value used. 

Usually, these are implemented in one of two ways:
- Painful listing of all the possibilities in the CSS, when they are finite, often with build tools. This includes both CSS rules for the specific values of each utility class, as well as exceedingly long selector lists for the commonalities among them.
- Pushing the friction to authors by asking them to use one class for the commonalities and one for the specific values. E.g. to use a Bootstrap Icons icon, authors need to use *both* a `bi` class and a `bi-iconname` class. 
- This is not an option for libraries, but authors (who have more control of their markup) may do things like `[class^="prefix-"], [class*=" prefix-"]`

None of these are ideal. It seems pretty straightforward to provide the capability these use cases *really* need, so this seems like a a quick win.

While the vast majority of use cases are around class names, I could see something like this being useful for all attributes that take a space-separated list of values.

## Potential solutions

I see two options:
1. Extending class selectors to support wildcards. It appears that `.foo-*` is actually *not* currently valid, so it seems like a natural choice.
2. Introducing a new attribute selector, that is basically a combination of `~=` and `^=`. Options for the operator could be `~^=`, `^~=`, or even `^~` if we want to keep it to a max of 2 characters.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10001 using your GitHub account


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

Received on Monday, 26 February 2024 15:39:22 UTC