Hacker News new | ask | show | jobs
by spinningslate 2697 days ago
That's really interesting. I'm also firmly in the space of finding CSS layout inscrutable (CSS styling is fine). I'd concluded that the issue is precisely the lack of peer-to-peer relationship constructs. Everything seemed based on 2 constructs:

1. Flowing 1D content (text) into a 2D space

2. Hierarchical relationships, i.e. positioning children with respect to parents.

I haven't looked deeply into flexbox or grid. My initial skim suggests they're both still fundamentally hierarchical. I'll take another look now given your comments.

I'll freely admit I haven't invested a lot of time trying to get to grips with the more recent constructs (flex/grid). I would say my initial forays were difficult and frustrating. CSS layout seems (seemed?) the antithesis of the maxim "make the simple things easy and the hard things possible".

As a counterpoint: back in the midst of time, there was a cross-platform UI toolkit called Galaxy. It only had 2 layout constructs: springs and struts. Springs defined a proportional layout between components (so would stretch/compress), struts defined a static relationship. It was remarkably simple to define layouts using just those two concepts.

The web is clearly a more complicated space than conventional, thick client apps that only ran on the desktop. Responsiveness is a much bigger challenge now. Nevetheless, it seems to me that the key construct lacking in CSS is the ability to specify peer to peer relationships among elements - without needing to create a whole cruft of container components.

You've incentivised me to give flex/grid another look. I remain healthily sceptical, but thanks for the prompt.

1 comments

I'd say grid is much more of a "new" concept for CSS than flexbox.

And while I'd always understand learning the basics - to get stuff done most everyone landed on hard coded (sort of) grids before "CSS grids" came out.

Beyond that, I still recommend looking in the (reborn) CSS zen garden:

http://www.csszengarden.com/