Re: [csswg-drafts] [css-variables?] Higher level custom properties that control multiple declarations (#5624)

I've been giving this issue quite some thought the past few days, and think I've come to propose an alternative syntax. It's basically a reuse of the attribute selector, but then with a custom property.

To get a bit ahead of my self, here's the pill example from the OP with this proposed syntax:

```css
[@var(--pill)="on"] {
   border-radius: 999px;
}
```

## Motivation

The motivation behind this alternative syntax is two-fold:

- CSS is declarative. The `@if` is imperative and feels off in that way.
- HLCPs are compared to HTML attributes

## Examples

_(Note: Using nesting here to keep things tidy)_

### Pill button

- If `pill="on"` were an HTML attribute:

    ```css
    button, input[type="submit"] {
        background-color: hotpink;
        color: white;
        border: 0;

        &[pill="on"] {
            border-radius: 999px;
        }
    }
    ```

- Using `--pill="on"`

    ```css
    button, input[type="submit"] {
        background-color: hotpink;
        color: white;
        border: 0;

        &[@var(--pill)="on"] {
            border-radius: 999px;
        }
    }
    ```

### Squares

```css
.square {
    --width: 4em;
    width: var(--width);
    aspect-ratio: 1/1;
    
    &[@var(--size)="small"] {
        --width: 2em;
    }
    
    &[@var(--size)="big"] {
        --width: 8em;
    }
}
```

## Benefits

- Devs already know this syntax (both `@var()` and attribute selectors), so there's nothing new to learn
- Circumvents the issue of partial application, as only [the syntax of the attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#Syntax) is allowed
    - _(Outside of scope) Perhaps a future addition would allow `>` and `<`, but limited to numbers only?_
- Plays nice with nesting
- No nitpicking by "Real Developers™️" that it should be `==` (comparison) instead of `=` (assignment)

## Downsides

- Might be confusing, as we've all learnt that `[]` is the attribute selector
    - Although: the `@var` part should give a clue there
- …?

--

I don't know if this even possible _(i.e. would this all require an extra run of the parser?)_, as I don't know how CSS parsers work. Feel free to point out how flawed this is in case is shouldn't be possible ;)

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


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

Received on Tuesday, 5 January 2021 14:03:59 UTC