[csswg-drafts] [css-cascade] non-destructive shorthands

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

== [css-cascade] non-destructive shorthands ==
In [Cascading and Inheritance: Shorthand Properties](https://drafts.csswg.org/css-cascade-3/#shorthand), we learn that shorthands allow authors to specify the values of several properties with a single property. This is very useful for a few reasons, but I find it most useful because it keep thoughts grouped together. This advantage has a profound catch; omitted values in shorthands are assigned their initial value.

So, to remain non-destructive looks something like this:

```css
.non-destructive-block-margin {
  margin-top: 10px;
  margin-bottom: 30px;
}

.non-destructive-inline-margin {
  margin-left: auto;
  margin-right: auto;
}

.non-destructive-margin-variation {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}
```

With these separated properties, the “margin” thought is no longer grouped together. So, is there a way we could make non-destructive shorthands? I have 2 suggestions.

#### Solution 1: Skip tokens

As proposed in #733, a skip token would allow authors to prevent the resetting of specific values in shorthands.

```css
.non-destructive-block-margin {
  margin: 30px *;
}

.non-destructive-inline-margin {
  margin: * auto;
}
```

In order for this to actually work, these skip tokens would be limited to ordered shorthands. However, there may be another way around that:

#### Suggestion 2: Identifiers

In [Grid Layout Module: Named Grid Lines](https://drafts.csswg.org/css-grid/#named-lines), we learn about **named lines** which allows authors to easily identify the grid lines being styled. Identifiers could be used by shorthands to limit the reach of overrides.

```css
.non-destructive-block-margin {
  margin: [block] 10px 30px;
}

.non-destructive-inline-margin {
  margin: [inline] auto;
}

.non-destructive-margin-variation {
  margin: [block-start] 0 [inline] auto;
}
```

An advantage of this syntax is that it would not be limited to order shorthands.

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

Received on Thursday, 25 May 2017 04:41:47 UTC