[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. 

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 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:

```
#^[myid] 
#$[myid] 
#*[myid]
```

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