W3C home > Mailing lists > Public > www-html@w3.org > March 2017

CSS class parameters

From: Alan <mmfunkyd@hotmail.com>
Date: Wed, 29 Mar 2017 05:51:55 +0000
To: "www-html@w3.org" <www-html@w3.org>
Message-ID: <DM3PR17MB0860815E6A623A0ADFE16358C4350@DM3PR17MB0860.namprd17.prod.outlook.com>
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
Received on Wednesday, 29 March 2017 12:24:55 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 29 March 2017 12:24:56 UTC