writing

Decorators: The Missing CSS Feature

This is an outline of a proposal for a feature that could be added to CSS to greatly simplify working with the language and make it much more pleasant to use. “Decorators” seems like a fitting name for this feature, not only because it describes what it does, but also because of its similarity to the Python feature.

CSS was designed to enable separation of content and style. This is a good idea, but perhaps it should have been called something like “abstraction of style from content”.

The central means of abstraction should be functional. We should be able to simply define parametrizable styling functions:

@decorator important(--color) {
  font-weight: bold;
  color: var(--color);
}
@decorator message(--vertical, --horizontal, --color: red) {
  oultine: 1px solid var(--color);
  padding: var(--vertical) var(--horizontal);
  color: red;
}

And apply them to HTML elements:

<p style="important(blue); message(10px, 15px);">some text</p>

The order in which these decorators are applied should be the order in which they are specified. There should be no complex nonlocal precedence rules to keep track of.

So for example:

<p style="message(10px, 15px); important(blue);">some text</p>

Should result in:

blue message

Equivalent HTML code ```html

some text

```

Whereas:

<p style="important(blue); message(10px, 15px);">some text</p>

Should result in:

red message

Equivalent HTML code ```html

some text

```

Then we would not need BEM, OOCSS or any other systems for organizing CSS. All of these can be seen as attempts to bring something like the above to CSS.

See also

Comments

On Mastodon.