Hacker News new | ask | show | jobs
by politician 1757 days ago
Is there a language that compiles to CSS but excludes the decades of cruft that have accumulated in CSS? Something that just exposes a few key primitives and jettisons the rest even if that means it doesn't handle some extreme edge cases?
5 comments

> decades of cruft that have accumulated in CSS

Like what?

I assume there's some CSS that doesn't have a use anymore but thinking about layout, we don't need floats for page layout but that was basically a hack, float is still useful for its original purpose.

Basically, the CSS spec isn't full of cruft but there are a lot of CSS practices that are no longer needed.

Was just thinking about this the other day. Once aspect-ratio gets Safari support, that will take away the need for the height:0/padding-bottom: 66% thing, which is one of the last hacky bits of CSS that I use regularly. Container queries will fill another huge hole, but I don't polyfill/do hacky things for that in the meantime.

CSS really does do pretty much everything you need these days.

I think the hard part with this is that because CSS properties are so context-dependent, the compiler would have to somehow figure out a way to translate your simple property into the correct one, without knowing how your HTML is structured.

For example:

.thing { topgap: 10 }

.other { topgap: 10 }

Would have to compile to different things if .thing was in a flexbox and .other was in a grid or a box. Since a lot of HTML is dynamically generated, we don't actually "know" this, and specifying which to use yourself ahead of time defeats the purpose, since you may as well just use the normal CSS properties. This could however work with completely static HTML. Maybe some JavaScript solution could hack on dynamic CSS but I would be sceptical of accessibility and performance in that case.

In the precompiled case, unless all the CSS was outputted using a very limited subset of CSS along with a large "base" CSS file, I don't quite know how it would work.

I hope somebody proves me wrong!

This is a case where build tools surprisingly shine. Example: if you use Fela (CSS-in-JS atomic style library), but build statically, it has all the context it needs to determine optimal order of rules and which rules are actually in use… but you can pipe the styles wherever you want at build time and eliminate the runtime for anything static.

(I use this on my site. It’s suboptimal for build and could use a mountain of refactor. But the source is up on my GH if anyone’s curious)

What in particular do you consider cruft? The original "standard flow" layout model is still very relevant for document-like pages like Wikipedia even if more advanced layout models have become available. In theory you can do everything with absolute positioning (the only primitive you really need) but it would be completely impractical.
I wonder if people would have the same sentiment if it had been a newly introduced language that the major browsers overnight agreed to all include as alternative to CSS. Now I feel like CSS keeps getting more complicated, but if there was a shiny new thing supported by all browsers, I would probably feel different.
I've been in the process of designing exactly such a language. It's nowhere near ready, but my goal is to create a design tool that can edit this language either using a figma/sketch like GUI or by editing the code directly.