Post

To target multiple classes with the same prefix, you'd typically have to resort to brittle attribute selectors. To make things easier, CSS is getting a new selector: the “Class Prefix Selector” (`.foo-*`). Check brm.us/class-prefix... to get the details. (Browser Support: None 😛 — just resolved!)

This could probably be more explicit about why the attribute version is brittle

Indeed, it could mention why `[class|="foo"]` (even if relaxed as suggested) is also not quite the same as `[class^="foo-"], [class*=" foo-"]` or `.foo-*`.

I updated the post to include selector benchmark results: gist.github.com/bramus/1de3b...

My point wasn't about perf it was about why its brittle.. but also i think it would be helpful to say why not [attr|=value]

In other words, since `[attr|=val]` was intended for possibly hyphenated BCP47 codes in `hreflang` etc., `[class|=foo]` matches the prefix even if it stands alone, which `.foo-*` is designed not to do. `:is([class^="foo-"], [class*=" foo-"])` also matches when nothing follows the hyphen.