Can we make a better CSS?

github logo ・1 min read

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?

twitter logo DISCUSS (6)
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

Classic DEV Post from Jul 10

How is your portfolio built?

Brett Beutell profile image
I like things that I don't understand on the first try

👋 Hey dev.to reader.

Do you prefer sans serif over serif?

You can change your font preferences in the "misc" section of your settings. ❤️