- From: Zambonifofex via GitHub <sysbot+gh@w3.org>
- Date: Sat, 10 Dec 2016 20:48:11 +0000
- To: public-css-archive@w3.org
@LeaVerou
No, custom property sets don’t cascade together. In your code, the
buttons would either have a red text color (when not on a screen), or
a blue background color (when on a screen), but never both.
>From an example in Tab’s proposal:
> Note that custom property sets override each other wholly, rather
than cascading together like colliding style rules do.
> For example, if these two style rules applied to the same element:
>
>```
> .foo {
> color: red;
> background: white;
> }
> #bar {
> color: blue;
> }
>```
>
> The `#bar` rule will win due to having a higher specificity, so its
`color:blue` rule will apply to the element, but the
`background:white` rule from the `.foo` rule also applies, since the
`#bar` rule did not override `background`.
>
> However, if these were instead defined as custom property sets:
>
>```
> .foo {
> --my-theme: {
> color: red;
> background: white;
> };
> }
> #bar {
> --my-theme: {
> color: blue;
> };
> }
>```
>
> Then when an element uses the `--my-theme` custom property set, it
will receive only the `color:blue` declaration. The `background:white`
declaration from the `.foo` rule is ignored completely, as its rule
lost the specificity battle.
In my code, on the other hand, buttons would always have a red text
color.
--
GitHub Notification of comment by Zambonifofex
Please view or discuss this issue at
https://github.com/w3c/csswg-drafts/issues/531#issuecomment-266237321
using your GitHub account
Received on Saturday, 10 December 2016 20:48:18 UTC