Consider CSS Custom Properties

[biancadanforth]

Issue #53 just scratched the surface on CSS Custom Properties (colloquially known as CSS variables), using the :root selector and setting up some global variables, similar to what can be done in SASS.

Unlike SASS variables, which are always global, CSS Custom Properties can also scope variables to a particular element. All CSS Custom Properties are inherited. Perhaps we can take better advantage of this in our CSS.

Note: There’s a great example in the Containers repository with the --usercontext icon. This uses attribute selectors, assigned via JavaScript, to customize the URL for each icon.

[jonathanKingston]

I wouldn't suggest containers is a wonderful example. However we select different elements and rely on inheritance of the property to come through to the child element.

I think there are much more powerful examples that could be made.

For example here is a kinda meta example of a previous company I worked at:

[use=feature] {
--primary-color: red;
}
[use=aside] {
--primary-color: blue;
}
panel h2 {
  color: var(--primary-color);
}

<panel use="aside">
  <h1>Thing</h1>
</panel>