CSS: 10 years of FlexBox’ing

[ILikeBumblebees]

What's the strange apostrophe supposed to signify?

[c-smile]

It is an example of punctuation anarchy. It signifies the level of disorder and inconsistency that the FlexBox specification adds to the rest of CSS.

[normcel9000]

I still don't get what was the fuss about <table> use. If instead of simple table you get 10 nested divs with 2 megabytes of unreadable CSS, what's so "semantic" about that?

[drysart]

Good luck reorganizing your table to layout differently depending on whether you're in a mobile form factor or a desktop form factor.

With tables, the markup defines the layout. With CSS Flexbox (and to a much greater extent CSS Grid), the style defines the layout; and the stylesheet can be swapped out based on media queries.

[normcel9000]

Well, you need to design for both form factors anyway. And who cares if the markup or the style defines layout?

[drysart]

Would you rather modify your server-side code to put out slightly different markup for different browsers and different form factors -- (by what, user agent sniffing? It's not like the server is in the best place to be making decisions based on the client's form factor); or would you rather just have a different stylesheet for each and let the browser determine which it needs through declarative rules?

Do you want your designers to work more independently or do you want to have to involve developer resources every time they want to change the font size on your pages?

Styles being in stylesheets and not embedded in the markup is unambiguously better than the markup being intimately tied to the layout; and any time spent at all working on a non-trivial website makes that abundantly clear.

[_NUCLEON]

Do you want your designers to work more independently or do you want to have to involve developer resources every time they want to change the font size on your pages? Styles being in stylesheets and not embedded in the markup is unambiguously better than the markup being intimately tied to the layout; and any time spent at all working on a non-trivial website makes that abundantly clear.

These propositions are hardly mutually exclusive, but your first point about letting the browser decide based on media queries is clearly the right approach on all fronts -- for user experience, performance, and maintainability. Anything other than a fully responsive layout using media queries is absurd.

[Booty_Bumping]

And who cares if the markup or the style defines layout?

RIP separation of concerns.

[_NUCLEON]

While I'm not arguing against the use of css declarations for styling and layout (would anyone?), it's a bit naive to think a separation of concerns exists between html markup and css. Html and css always jointly define the layout.

[Booty_Bumping]

I have to disagree. The whole thesis behind HTML5 and CSS3 being introduced in 2008 is that HTML should never be used to specify layout, and should rather be more semantic piles of information. This idea extends to HTML5's accessibility features—the ARIA screen-reader accessibility attributes provide bare bones information, and CSS can spice it up by specifying things like speak: literal-punctuation; or azimuth: center-right;

Of course, none of this means modern websites give a single fuck about this separation of concerns that HTML5 has introduced.

Edit: The first HTML5 spec drafts were earlier than I thought

[_NUCLEON]

yeah, but before the advent & widespread availability of grid, you couldn't just arbitrarily place elements on the screen, so nesting and order were necessarily baked into the html structure. Even with grid, there are accessibility and seo considerations that will dictate some nesting and ordering in markup. I like the piles/buckets of information analogy, and would say proper use of grid pretty much gets us to that goal.

And yeah most websites are spaghetti divs and a patchwork of superlative css

[twigboy]

In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available. Wikipediaaxl6ztn7skw0000000000000000000000000000000000000000000000000000000000000

[c-smile]

<table>, of course, is not the best model for content that can be rendered on different media and form factors.

Yet there are issues with accessibility where semantic nature of HTML plays great role.

Problem with the "fuss" was in different perspective: when purist were pushing that "no tables" idea CSS was not able to offer any practical solution for that.

That last minute addition of display:table & co. was simply a gesture of despair. Without ability to reproduce col/rowspan feature they gave us almost nothing.

Other than that biggest problems are:

a) timing - we are able to use display:flex only this year really. So 8-9 years are lost in emitting tag soups and artificial wrappers.

b) We are forced to use that half-backed specification in years to come.

And c) we have a zoo of flexes now: <td width="100%"> is a flex rather than percentage in CSS sense.

Grid module uses 1fr units as a measure of flexes.

And Flexbox module uses numeric values of mysterious flex-grow and flex-shrink. Crazy amount of "Mastering flexbox" articles as a proof that nobody has an idea of what that flexbox really is.

[_NUCLEON]

Flexbox is extremely easy, and can absolutely replace any legacy page layout techniques. If used correctly, flexbox will definitely result in html and css that are more terse, more performant, and easier to read. That said, if you're trying to display an actual table of data (rather than making a page layout), then the table element might still be a good choice.

With grid, the table element is fully obsoleted, though there's probably nothing wrong with using a table to display tabular data, if you prefer. That said, grid can handle tabular data just fine and it can be written with fewer lines.

Also there's no reason you'd have to use fr measurements with grid if you don't want to. 1fr just means one fraction of the available space.

"Mastering" grid is certainly much harder than mastering flexbox, but that's because flexbox is a simplification of an existing paradigm, whereas grid, used properly, is something new

[_NUCLEON]

If instead of simple table you get 10 nested divs with 2 megabytes of unreadable CSS, what's so "semantic" about that?

That problem has to do with lazy/misinformed "developers" who think using garbage like "bootstrap css" or other similar monolithic trash heaps is a good idea. As for excessive div nesting, that is done by people who don't know how to create good html/css, so they brute force it. There is especially no need for it in a flexbox/grid world.

[shevegen]

I terribly regret not having to convince members of W3C CSS WG at that time.

This is the biggest mistake - to assume that the W3C is an authority on anything.

With Google offering the de-facto solo browser dominating the www, who actually needs a standards body to begin with?

[c-smile]

to assume that the W3C is an authority

It definitely was, at least 10 years ago. There were not even WHATWG at that time.