Re: [csswg-drafts] Proposal: Custom CSS Functions & Mixins (#9350)

Why introduce a new syntax for mixins?  
Why not just being able to declare that a selector acts like if it has some other selectors on it?
Providing arguments with custom vars...

```css
/* mixins but without any special syntax */
.foo { color: var(--color, red); }
.bar { background: var(--bg, red); }
[round] { border-radius: 5px; }


#myfoo1 {
  color: black; /* fallback, overriden because declared before @same-as */
  @same-as [round].foo;
  padding: .3rem; /* other normal stuff */
}
#myfoo2 {
  @same-as .foo.bar;
  --color: green;
  --bg: white;
  color: orange;   /* override @same-as because declared after */
}
foo { /* OMG he use unknown elements!! :X */
  @same-as div.foo;
  --color: rebeccapurple;
}
```
```html
<div id="myfoo1">Fool</div>  = color: red, background: red and radius: 5px
<div id="myfoo2">Baroof</div> = color: orange and background: white
<foo>C'est un foo!</foo>  = color: rebeccapurple
```

Would be the same as if HTML markup is:
```html
<div id="myfoo1" class="foo" round>Fool</div>
<div id="myfoo2" class="foo bar">Baroof</div>
<div class="foo">C'est un foo!</div>
```
It would be really the same as if HTML markup is modified, nothing is done on the CSS. (I'm even OK if browser implementors really adds the classes and attributes in the DOM...). 

Meaning also that incompatible selectors would just don't work:

```css
div.foo { color: var(--color, red); }

#myspan {
  @same-as .foo.fa.fa-check;
}
```
```html
<span id="myspan">Fool</div>  = color: inherit, not red because span.foo has no CSS matching (but have an icon...)
```
__________
- No more argument syntax issues
- No more return syntax issues
- No variable scope issues (other that usual cascade)
- No more prosaic HTML markup
- Will work with already existing frameworks classes and features

What a time to be alive!!
(and to spend on CSS Functions spec only ;) )

-- 
GitHub Notification of comment by devingfx
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-1967793819 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 27 February 2024 22:38:33 UTC