4 ms·

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 sy

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?

eyelidlessness 2y ago
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.
pphysch 2y ago
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.
- turboat 2y ago
  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.
mch82 2y ago
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-file 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.
legulere 2y ago
I think one classic book about it is "Rastersysteme für die visuelle Gestaltung - Grid systems in Graphic Design". Never read it though.
- turboat 2y ago
  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.
- cdrini 2y ago
  Ah available for borrow at Internet Archive: https://openlibrary.org/works/OL3106695W/Grid_systems_in_graphic_design?edition=key%3A/books/OL15500591M https://openlibrary.org/works/OL3106695W/Grid_systems_in_gra...
cdrini 2y ago
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
- madeofpalk 2y ago
  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.
wruza 2y ago
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.

eyelidlessness 2y ago

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.

pphysch 2y ago

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.

turboat 2y ago
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.

mch82 2y ago

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-file 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.

legulere 2y ago

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

turboat 2y ago
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.
cdrini 2y ago
Ah available for borrow at Internet Archive: https://openlibrary.org/works/OL3106695W/Grid_systems_in_graphic_design?edition=key%3A/books/OL15500591M https://openlibrary.org/works/OL3106695W/Grid_systems_in_gra...

cdrini 2y ago

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

madeofpalk 2y ago
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.

wruza 2y ago

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.