Re: [csswg-drafts] [css-variables?] Higher level custom properties that control multiple declarations (#5624)

Hello,

I appreciate that CSS is declarative. I've been using PostCSS nested block/mixin/loops/... for many years, but I've also established conventions to prohibit more than two nesting levels, and I removed conditional statements that now only exist in mixins. I find that conditional statements make my CSS less readable and understandable. While reading @bramus post on this proposal and (almost all of) the above comments, I've been thinking many times that the provided cases can be resolved since it always has been, ie.:

```css
/* Before this proposal */
.element {
  font-size: 2rem;
  color: red;
}
.element--modifier-1 {
  font-size: 3rem;
  color: blue;
}
.element--modifier-2 {
  font-size: 5rem;
  color: green;
}

/* Using this proposal */
.element {

  font-size: 2rem;
  color: red;

  @if-var(--modifier = 1) {
    font-size: 3rem;
    color: blue;
  }
  @if-var(--modifier = 2) {
    font-size: 5rem;
    color: green;
  }
}
```

I may have missed the initial motivation(s) for CSS conditional statements, either inline or as block. I'm sorry if I did and please consider this comment just as a humble feedback from a casual CSS author. Is it only about encapsulation (CSS vs CSS+JS, single vs multiple selectors)? Reducing CSS file weight? Web components?

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


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

Received on Friday, 15 January 2021 08:34:12 UTC