Re: CSS class parameters

That would be the main application I see for the concept. Your stylesheets would remain declarative and immutable, while also being parametric.

In some sense, it would be like Web Components (and conceptually, like React). They’re configured with standard HTML properties and attributes. But they also respond to dynamic changes of these values via DOM manipulation.

Maybe an alternative would be to allow the value of an attribute selector to be captured and dereferenced, rather than only matched on. The same effect would then be achievable using custom attributes.


On Mar 29, 2017, at 08:44, Aaron Rackley <aaron.rackley9@gmail.com<mailto:aaron.rackley9@gmail.com>> wrote:

Are you thinking this would work alongside another frontend framework to re-render on data change?

On 29 March 2017 at 13:33, Shane Thompson <shanept@iinet.net.au<mailto:shanept@iinet.net.au>> wrote:
How would the correct attribute be chosen for the parameter?

Would it always take the value of the value attribute?

I think an equivalent sort of functionality could be achieved here with keyframes and transitions in this case.

Sent from BlueMail<http://www.bluemail.me/r?b=9226>
On 29 Mar 2017, at 8:28 PM, Alan <mmfunkyd@hotmail.com<mailto:mmfunkyd@hotmail.com>> wrote:
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