Discussion on: What if CSS was imperative?

[Mihail Malo]

Things that are easy about CSS:

• Overall grammar/syntax
• Selectors (pseudo, combinators, whatever)
• Variables
• "Media Queries" (Jesus, what a name)

Things that are hard about CSS:

• Specificity
• ::before &::after (content?)
• margin vs padding
• Box model (particularly that old box model is the default and you have to opt out)
• Syntax of individual properties (eg: how do I apply transition with a given time and function, but to two properties? Oh, it's just a shorthand? Oh, if I then write out just the "transition-property" it will overwrite?)
• Specificity
• All these properties, and they're not even namespaced. How do I know justify-content, align-items and align-content are about flexbox? (ok, they're also in grid now)
• Specificity !important

I avoided most of these by gratuitous RTFM, having the luxury not to use CSS frameworks, and having the luxury to use component frameworks that namespace classes, but I still have to admit that CSS is hard. With editor tooltips and everything, it still requires a lot of reading.

The only thing I'd be interested in being "imperative" at any point would be sizing using a constraint solver. flex and grid are great, but min-width: calc($(:prev).width + 1vw) could be just as fast :v

calc is frustratingly limited, too.

html{
    font-size: 8rem;
}
@media screen and (min-width: 800px){
  html{
    font-size: calc(8rem + (9rem-8rem) * (100vw - 800px) / (1100px - 800px));
  }
}
@media screen and (min-width: 1100px){
  html{
    font-size: 9rem;
  }
}

I know this should make the font go from 8 to 9 rem as vw goes from 800 to 1000 px.
You know it.
Why can't calc understand that <length>/<length> is <number>? No one knows.
Oh well, time to insert some magic numbers instead.