Re: [csswg-drafts] [css-values-4] Proposal: additional CSS-Wide Keyword, "ignore" (primarily for css variable fallbacks) (#5319)

I have another use-case for such a keyword: remove/invalidate styles previously set by specific rulesets, but not all.

Let's say I have a button with the following styles:

```html
<button>Click me</button>
```

```css
button {
   background-color: red;
   padding: 10px;
}

button:hover {
   background-color: green;
   padding: 20px;
   transform: scale(1.1);
}
```

Now, I want to create some kind of "variant" of that button, let's call it "cta". In the case of that variant, I want to change a bit the styles on hover. I don't want any change to `padding` and `transform` compared to the original styles, but I do want the background to change. So, how do I do that today?

Well, I could just override my previous style for `padding` and `transform` with a new `:hover` ruleset, like so:

```html
<button>Click me</button>
<button class="cta">Click me</button>
```

```css
button {
   background-color: red;
   padding: 10px;
}

button:hover {
   background-color: green;
   padding: 20px;
   transform: scale(1.1);
}

button.cta:hover {
   padding: 10px;
   transform: none;
}
```

But this is not want I want, because I don't necessarily know the declarations inside the `button` ruleset, and there also could be other changes to it through other pseudo-classes, which I will want to have. I just want to remove some styles defined inside the `button:hover` ruleset here.

A far better way to do it would be to use the `:not` pseudo-class like so:

```css
button {
   background-color: red;
   padding: 10px;
}

button:hover {
   background-color: green;
}

button:hover:not(.cta) {
   padding: 20px;
   transform: scale(1.1);
}
```

But this starts to get complicated. I have to split my ruleset into two different rulesets, and one of them now has a higher specificity than the other. This will quickly get out of hand.

Now, if we had an `ignore` keyword, we could do something like that:

```css
button {
   background-color: red;
   padding: 10px;
}

button:hover {
   background-color: green;
   padding: var(--padding, 20px);
   transform: var(--transform, scale(1.1));
}

button.cta:hover {
   --padding: ignore;
   --transform: ignore;
}
```

Now we have our style change for `background-color`, but we removed it for `padding` and `transform` while keeping the keeping our cascading simple. **This gives us the ability to precisely "unset" previously set styles without going back to the `initial` value.**

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

Received on Friday, 17 July 2020 13:39:19 UTC