[csswg-drafts] [css-specificity] Add specificity property modifier (replace !important) (#3890)

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

== [css-specificity] Add specificity property modifier (replace !important) ==
Currently there is the ability to hoist a property's specificity beyond that of its selector via `!important`. This often leads to people writing labyrinthine selectors, then slapping `!important` on the properties to override a previous developer's styles.

What if where you put `!important`, you could put `!specificity(10)`? What if in developer tools, every rule/property showed its specificity in number form? This would effectively change the esoteric nature of specificity to something much easier to determine and comprehend. It would be very clear to see, "Oh, my rule isn't being applied because it's of specificity 2 and there's another one of specificity 5."

Let's say that you want to ensure your `.hidden` class always hides the element it's applied to. In your stylesheet you could have something like:
```css
:root {
  --sp-low: 1;
  --sp-med: 10;
  --sp-high: 20;
}

.hidden {
  display: none !specificity(var(--sp-high));
}
```

Or imagine switching between light and dark modes. All you would have to do is change the specificity variable of the dark to be greater or less than that of the light.
```css
:root {
  --sp-light: 1;
  --sp-dark: 0;
}
```
```javascript
document.getElementById('themeToggle').addEventListener('change', ({target}) => {
  root.style.setProperty('--sp-dark', target.checked ? 2 : 0);
}
```


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

Received on Friday, 3 May 2019 21:32:00 UTC