DEV Community

Discussion on: Can we make a better CSS?

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?