CSS class parameters

Has the idea of adding the ability to parameterize classes within 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 providing a parameter to a class in the markup. So say I had a progress bar. In this imagined syntax, I could pass in the percentage completion as a parameter:

Markup:

<div class=“progress-bar”>
  <div class=“progress-bar-completion(50)”>
</div>

Styles:

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

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

This could be very helpful in front-end paradigms where the dynamic logic mediates styling via markup.

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.

I’m very curious whether this has been discussed before.

-Alan