Can we make a better CSS?

#discuss

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)

Anwar • Jun 13 '19 • 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)

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

Boots • Jun 17 '19

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

Anwar • Jun 17 '19

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?

Caleb Winston • Jun 16 '19 • 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.