Can we make a better CSS?

Brett Beutell on June 13, 2019

Now that the State of CSS results are in, I'm reminded of all the complaints I've had about CSS over the years. Has anyone ever tried to write a m... [Read Full]
markdown guide
 

Turning natural language into CSS would be so exciting indeed :) Maybe if you have some use cases it would inspire some of our folks on this !

Maybe something flexible like that? Or more high-level?

import { border-radius, border-color } from "./variables" // such ES6, very import

.mobile-menu
  if focused:
    .mobile-menu > a
      background-color: red
  border-radius: var(border-radius)
  border-color: var(border-color)

Kind of think this is closer to SASS than anything else new 😅

 

Hahah yeah this was kind of a flippant thought experiment!

I was thinking a little more along the lines of changing the semantics. So, instead of saying “border-radius: 50%” you’d say something like “round the edges like a circle” or “round-like: circle”

Basically providing an abstraction for things that feels more intuitive, even if it costs some flexibility

 

Oh yeah I totally get you, something more readable, eventually closer to the natural language. I feel a preprocessor would fill this need, to offer the flexibility to choose readability over customization. Maybe a new tool, maybe add-ons for an existing preprocessor?

 

One thing I would really like to see is a kind-of WebAssembly for CSS.

Some sort of intermediate representation (IR) that lets us tell the browser more specifically what to render would be really cool. It would also (I think?) make rendering simpler for browsers as much of the complexity would be moved to the compiler that compiles the high-level CSS-like language to the lower-level IR.

 

ooo yeah claps hands excitedly

I think Houdini could be useful in this endeavor

houdini.glitch.me

 

I believe that’s what Houdini is supposed to be right, in a sense? Or it’s Monday morning and I’m making things up

code of conduct - report abuse