[csswg-drafts] [css-values] (#5438)

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

== [css-values] ==
In **[[css-values]](https://drafts.csswg.org/css-values-4/#dashed-idents)** it includes a section about “Explicitly Author-defined Identifiers” where it explains the naming convention of `--` preceding a custom `<ident>` as the syntax to be used CSS-wide for custom author-defined things.

Presently the only spec that gives an example of using a dashed ident is **[[css-variables]](https://drafts.csswg.org/css-variables-1/#custom-property)** where it explains the syntax for defining a custom property.

I'm not sure these all belong in the **[css-values]** spec, but it would be great if there were examples somewhere explaining how to express author-defined syntax in addition to custom properties:

## Author-defined At-rules

The syntax for an at-rule is described in **[[css-syntax]](https://drafts.csswg.org/css-syntax-3/#at-keyword-token-diagram)** as `@` + `<ident>`, this means an author-defined at-rule would be `@` + `<dashed-ident>` and could take any of the following forms:

```css
@--author-defined;
@--author-defined with prelude;
@--author-defined {}
@--author-defined with prelude {}
```

## Author-defined Psuedo-Class Selectors

The syntax for a pseudo-class selector is described in **[[selectors]](https://drafts.csswg.org/selectors-4/#pseudo-class)** as either `:` plus either an `<ident>` or a `<function>`, and the syntax for an author-defined function is `<ident>` + `(`-block, so that means the syntax for an author-defined pseudo-class is `:` plus either `<dashed-ident>` or an author-defined `<function>` (`<dashed-ident>` + `(`-block).

```css
:--author-defined {}
:--author-defined() {}
```

## Author-defined Pseudo-Element Selectors

Pseudo-element syntax is also described in **[[selectors]](https://drafts.csswg.org/selectors-4/#pseudo-element-syntax)**. The syntax for a pseudo-element in CSS is `::` plus either an `<ident>` or a `<function>`, so that means the syntax for an author-defined pseudo-element is `::` plus either a `<dashed-ident>` or an author-defined `<function>` (`<dashed-ident>` + `(`-block).

```css
::--author-defined {}
::--author-defined() {}
```

## Author-defined Selector Combinators

The general syntax for a combinator is harder to track down, the idea for `/ident/` to represent combinators with names existed at one point in a previous edition of **[[css-scoping]](https://www.w3.org/TR/2014/WD-css-scoping-1-20140403/#deep-combinator)** with the `/deep/` combinator (and possibly others) but I'm not sure where in any current specs this naming convention for combinators is described. I believe the way you'd express an author-defined combinator would be `/` + `<dashed-ident>` + `/`.

```css
a /--author-defined/ b {}
```

## Author-defined Functions

Functions are a real workhorse in CSS syntax and a natural extension point for author-defined functionality in many parts of CSS syntax (including in selectors and at-rule preludes). The syntax for a `<function>` token is shown in **[[css-syntax]](https://drafts.csswg.org/css-syntax-3/#function-token-diagram)** is `<ident>` + `(`-block, which would make the syntax for an author-defined function `<dashed-ident>` + `(`-block.

```css
a {
  width: --author-defined();
}
```

## Author-defined Units

The `<dimension>` token which associates a number with a named unit is described in **[[css-syntax]](https://drafts.csswg.org/css-syntax-3/#dimension-token-diagram)** as the pairing of a `<number>` with an `<ident>`, like `5px`, this means a `<dimension>` token with an author-defined unit would be `<number>` plus a `<dashed-ident>`:

```css
a {
  width: 1--author-defined;
}
```

## Author-defined Keywords

These are not to be confused with CSS custom properties or `var()` as keywords are used many places in CSS where properties or values of properties cannot be defined or used. A purely author-defined keyword might simply be a `<dashed-ident>`:

```css
a {
  width: --author-defined;
}
```

## Author-defined Annotations

I'm not sure if the kind of thing of which `!important` is the only specified value is called a 'priority' in for `!anything-like-this` or if 'priority' refers to the `important` part of `!important`, so I'll use the placeholder term 'annotation' here. The syntax for `!important` is described in **[[css-syntax]](https://drafts.csswg.org/css-syntax-3/#!important-diagram)** as `!` plus optional whitespace, plus the literal `<ident>` `important`, plus optional whitespace. If there was ever an author-defined annotation like this would the syntax be `!` with optional whitespace, a `<dashed-ident>`, followed by optional whitespace?

```css
a {
  width: 50px !--author-defined;
}
```

---

I also have a repository with examples of all of these parts of author-defined CSS syntax here: https://github.com/tomhodgins/custom-css

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 17 August 2020 16:39:06 UTC