Hacker News Reader

Comment by turboat | Hacker News Reader

Suppose we could create a backwards-incompatible system to replace CSS. How would we do it?

Are there any books or papers on how to create a coherent layout system?

What about alternatives like Qt, Tk, SwiftUI, etc.? I've never used anything besides CSS. Are any of the actually-implemented systems in the wild better? If so, what makes them better?

I want a system that provides a better interface for developers, but how? If we could start over, what are the design principles?

View on HN

Not particularly anti-css, but you may be interested in concepts like size groups, properly predictable size-request-allocate cycle, width-for-height, constraint- and align-based layouts and in generally cleaning up the mess of non-orthogonally connected ideas in css. More explicitness and separation for properties. Remove bs like negative margins, make all distances multi-level, e.g. padding = max(el.paddings[]). Make bounding boxes explicit, make borders proper elements, etc. Boxing isn’t a bad model, CSS is just an awful implementation of it. Absolutely ridden with fragile incantations and absurd limitations which bring more issues and “solutions” that will break 99% of the times you touch it.

Constraint-based layout using the Cassowary algorithm seemed like a popular alternative for a while (see https://github.com/slightlyoff/cassowary.js/?tab=readme-ov-f...). It’s designed to solve for variance in screen size and shape. Apple switched to Swift UI and may have moved on from this approach.

This would be such an interesting write up comparing many styling/layout systems! Unfortunately I reckon not many people have experience with multiple styling languages, so not many people can create such a write-up.

I think flutter and XAML might be other interesting ones to look at

XAML poorly reimplements half of CSS layout, and then gives up and tells you to write your own manually positioned layout with terrible performance.

Things which are 3 lines in CSS are hundreds of lines of a combination XAML/.NET only to get janky window resizing behaviour.

One thing to be cautious about when selecting prior art for reference is that CSS sets a high bar for declarative control. I can’t speak to any you mention in detail, but my sense is that more comparable prior art would likely be found in print use cases.

I think one classic book about it is "Rastersysteme für die visuelle Gestaltung - Grid systems in Graphic Design". Never read it though.

Thanks for the reference.

As I've been thinking about this, I do wonder if starting with grids as the foundation would have been a better approach. As I understand it, early CSS focused on stuff like color and font style, with primitive layout tools. Over time better tools have been bolted on, but it's messy.

Say we merged flexbox and grid into a unified system, and threw away the other layout algorithms. At the same time, made some tweaks to clarify margin, border, padding, and overflow. Maybe that's a good foundation.

Ah available for borrow at Internet Archive: https://openlibrary.org/works/OL3106695W/Grid_systems_in_gra...

CSS is overall pretty great and I've seen at least a couple non-web GUIs rip out their bespoke GUI systems and replace them with CSS or something very much like it.

I think the big change will be better support for hierarchical definitions, including but not limited to nesting. TFA discussion would be pretty moot if there were namespaced properties that could somehow fit under display: masonry; rather than polluting the global namespace.

I have to assume that's partly because of the availability of implementations, tooling, and developer familiarity. Many platforms will let you toss in a web view, and if you want to set up e.g. a configuration screen with text and toggles, HTML/CSS will get the job done, more easily than maintaining a custom system that's peripheral to the core purpose of your app.

I don't want to be overly negative, but I just can't view CSS as "pretty great."

I appreciate the inherent difficulty of using 1-dimensional static text to specify a 2-dimensional dynamic layout. Still, basically every programming problem involves defining abstractions over some domain concept and expressing that in the syntax of your programming language. Somehow that's harder in CSS than any other language I've used.

Within web dev I find both HTML and JS much easier to work with, despite their imperfections.

Reply on news.ycombinator.com