Parametric CSS

Has the idea of adding the ability to parameterize selectors from the DOM ever been considered? I have searched the archives and the web, but I haven’t been able to locate any past conversations about this.

Basically, the idea would be to allow CSS rulesets to be templated, by allowing attribute values to be dereferenced. So say I had a progress bar. In this imagined syntax, I could control the percentage completion via a custom attribute:

Markup:

<div class=“progress-bar”>
  <div class=“progress-bar-completion” completion-percentage=“50">
</div>

Styles:

.progress-bar {
  background-color: pink;
  height: 5px;
  width: 400px;
}

.progress-bar-completion[completion-percentage:percentage] {
  background-color: red;
  height: 100%;
  width: `percentage`%;
}

Here, the progress bar effect requires the combination of several rules. Sure, the width could be set in the `style` attribute, but then the effect becomes lexically split between the static and dynamic parts. Parameterization also opens the door to dynamism in CSS features that aren’t available in the `style` attribute.

Originally, I accidentally posted this to www-html, and I had thought about extending class names to have parenthesized parameters. But it occurred to me that it might be simpler to leave class names alone, for the sake of argument. Perhaps dereferenced values could only be used as property values. Or maybe they could be templated anywhere. I leave that up for future debate, if the basic concept can get traction.

This could be very helpful in front-end paradigms where dynamic logic mediates styling via markup, like React and Web Components. I’m very curious whether this has been discussed before.

-Alan