DEV Community

Boots
Boots

Posted on

Can we make a better CSS?

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 more intuitive abstraction or DSL on top of CSS?

I remember seeing little tools, like one that allows you to describe a CSS grid with pipes and dashes, but nothing comprehensive.

Better yet, is there anything that can turn natural-language queries into CSS?! That'd be a fun project, huh?

Top comments (6)

Collapse
 
anwar_nairi profile image
Anwar • Edited

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)
Enter fullscreen mode Exit fullscreen mode

Kind of think this is closer to SASS than anything else new šŸ˜…

Collapse
 
brettimus profile image
Boots

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

Collapse
 
anwar_nairi profile image
Anwar

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?

Collapse
 
calebwin profile image
Caleb Winston • Edited

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.

Collapse
 
brettimus profile image
Boots

ooo yeah claps hands excitedly

I think Houdini could be useful in this endeavor

houdini.glitch.me

Collapse
 
brettimus profile image
Boots

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