Re: CSS class parameters

Answers inline.


On Mar 29, 2017, at 08:33, Shane Thompson <shanept@iinet.net.au<mailto:shanept@iinet.net.au>> wrote:

How would the correct attribute be chosen for the parameter?


I’m not sure what you mean by “attribute”. Do you mean CSS declaration? In my totally made up syntax, the parameter value is dereferenced by putting it in backticks.

Would it always take the value of the value attribute?

In typical parlance, the declared name is a parameter and a value assigned in an invocation is an argument. The argument would always be the value specified with the class name, if that’s what you’re asking.


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

Interesting, could you write out an example? I don’t think I get how this would work. In any case, would it be as general as textual substitution? There’s something to be said for a tool that is really generic, in that it can be used in creative ways beyond what was initially imagined.


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