Re: [csswg-drafts] [CSS-SELECTORS-4]#defines - like in programming language

For selectors, the proposal is actually much simpler than @tabatkins's [CSS Extensions custom selector proposal](https://tabatkins.github.io/specs/css-aliases/#custom-selectors), since it would only be a shorthand for existing selectors, instead of allowing script-based tests.

For properties, @Nadya678's proposal does look a lot like `@apply`, and I'd suggest looking at the discussion in #1047 & elsewhere for syntax that has already been considered & the problems that were encountered.

________________________________

So, focusing only on the selector side:

Selectors 4 already has the [`:matches(selector-list)` selector](https://drafts.csswg.org/selectors-4/#matches), which allows a list of alternative selectors to be treated as one.  With CSS preprocessors, you may be able to use a preprocessor variable to avoid repeating the selector-list many times, but it would definitely be nice if CSS had a native way to avoid that repetition.

A rough proposal for how to do so without changing CSS parsing rules too much: 

- A new at-rule, `@selector-set` that allows you to define a name for the selector set and the list of selectors it is equivalent to.
- A single new pseudoclass `:matches-set()`, which is like `:matches()`, but it takes the name of a previously defined selector set as its parameter.

```css
/* selector definitions */
@selector-set text-ish {
  input:not([type]),
  input[type='text],
  input[type='number'],
  /* ... */
}
@selector-set text-plus {
  :matches-set(text-ish), /* extend one set by including it in the list for another */
  input[type='color'],
  select,
  textarea
}

/* later ... */

:matches-set(text-plus) {
  border: solid #aaa;
  padding: 0.5rem;
}
```

Of course, any restrictions on selectors inside `matches()` would also extend to `matches-set()` and therefore to the selector set. As [currently defined](https://drafts.csswg.org/selectors-4/#matches), that means that both [compound and complex](https://drafts.csswg.org/selectors-4/#structure) selectors are allowed, but pseudo-elements are not.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2298#issuecomment-364778609 using your GitHub account

Received on Sunday, 11 February 2018 19:12:15 UTC