[css-selectors] Substring Matching of Individual Class Names

[simlawr]

It's currently possible to match substrings of attribute values, including the class attribute.

https://www.w3.org/TR/selectors-4/#attribute-substrings

It would also be useful to have the ability to match substrings of individual class names. Using the existing attribute selector syntax as a reference, this might look something like:

.classname /* A standard class selector */

.[^class] /* Matches any class name that begins with "class" */
.[$name]  /* Matches any class name that ends with "name" */
.[*ass]   /* Matches any class name that contains the substring "ass" */

Which would be compatible with the Selectors Level 4 case-sensitivity syntax:

.[^classname i] 
.[$classname i] 
.[*classname i]

Also, it could be modified to support substring matching in ID selectors:

#[^example]  #[^example i] 
#[$example]  #[$example i] 
#[*example]  #[*example i]

Such a selector would make it practical to use a naming convention whereby a .Module parent shares common styles with a .SubModule child because although this can be achieved by grouping the related classes, it becomes unwieldy as the number of children increases, for example:

.Module, .SubModule, .AnotherModule, .YetAnotherModule {…}

:matches(.Module, .SubModule, .AnotherModule, .YetAnotherModule).variant {…}

Whereas, this could be rewritten in a simpler form using a substring matching class selector, so that there is no need to manage lists of dependants and style sharing is automatic:

.[$Module] {…}         /* Equivalent to .Module */
.[$Module].variant {…} /* Equivalent to .Module.variant */

.SubModule {…}         /* Inherits styles from .Module */
.SubModule.variant {…} /* Inherits styles from .Module.variant */

.ModuleUnrelated {…} /* Not matched as name begins not ends with "Module" */

The effect is static inheritance without the use of a preprocessor e.g. @extend in Sass and Stylus.

[simlawr]

Additional comments on this proposal can be found at WICG Discourse.

[heycam]

FWIW browsers can handle class and ID selectors in an efficient manner (by storing tables of classes and IDs that appear in style sheets), which is not really possible with substrings. If we had this feature I would expect selector matching for them to be slower, like it is for regular attribute substring matches.

If we want a mechanism for class inheritance in CSS I'd rather have an explicit feature for it.

[simlawr]

FWIW browsers can handle class and ID selectors in an efficient manner (by storing tables of classes and IDs that appear in style sheets), which is not really possible with substrings.

I would have thought it possible to at least optimise, to some extent, begin/end matching.

If we had this feature I would expect selector matching for them to be slower, like it is for regular attribute substring matches.

There's no doubt that substring matching attribute selectors are amongst the least performant.

Though, I would differentiate between matching the beginning/end of a string and matching a value contained within a string, the latter being notably slower (depends on string length).

Regarding the performance impact of the widespread use of substring matching, the following articles by Steve Souders and Ben Frain suggest it would not be a significant concern:

• Performance Impact of CSS Selectors
• Simplifying CSS Selectors
• CSS performance revisited: selectors, bloat and expensive styles

I would certainly be happy to spend some of my performance budget on such a selector.

If we want a mechanism for class inheritance in CSS I'd rather have an explicit feature for it.

I completely agree, however, this would require a fundamental change to the CSS Object Model and realistically this isn’t going to happen anytime soon, it could even take decades.

This is an interim solution that is pragmatic, could be implemented relatively quickly as it leverages an existing feature of the language and provides many of the same benefits.