4 ms·

You might as well add if, then, else, functions, do, while, switch, ...

• t0astbread 3y ago
  All of that? That's so complicated. Maybe we can add something more versatile. Something like: .my-button { padding: 1em; goto: my-button-colors; } html { label: my-button-colors; background: white; color: black; } @media (prefers-color-scheme: dark) { html { label: my-button-colors; background: black; color: white; } } The most specific label will be jumped to. Labels follow the usual specificity rules (also including `!important`). Jumps to an invalid label are no-ops. Styles within a ruleset are evaluated top-to-bottom. Labels propagate to children. Of course the above example is silly. We also need to make sure we don't apply button styles to the `html` element. We can do that with a protective conditional goto using custom properties (aka variables). We can also make use of variables to implement returns: .my-button { --end: none; --next: my-button-colors; label: return; goto: var(--next); padding: 1em; } html { --end: end; label: end; /* Jump here to end a ruleset immediately. */ } html { label: my-button-colors; goto: var(--end); background: white; color: black; --next: none; goto: return; } @media (prefers-color-scheme: dark) { html { label: my-button-colors; goto: var(--end); background: black; color: white; --next: none; goto: return; } }