[csswg-drafts] Substring Matching of Individual Class Names

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

== Substring Matching of Individual Class Names ==
It's currently possible to match substrings of attribute values, including the class attribute. 


It would also be useful to have the ability to match substrings of individual class names. Using the existing attribute selector syntax as a guide, 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](https://www.w3.org/TR/selectors-4/#attribute-case) syntax:

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

It could also be modified to support substring matching in ID selectors:


This could be used to create a parent/child type relationship using a naming convention. For example, a `.Module` parent class, which has a `.SubModule` child that inherits the styling of its parent. 

This could be achieved by grouping the related classes:

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

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

However, it becomes increasingly unwieldy as the number of children increases. Whereas this could be rewritten in a simpler form using the proposed *substring matching class selector*, like so:

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

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

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

Inheritance is automatic and there is no need to manually manage lists of child classes. In effect, this is **static inheritance** in CSS without the use a preprocessor e.g. `@extend` in Sass and Stylus.

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

Received on Friday, 3 August 2018 16:00:05 UTC