htmlcssflexboxseparation-of-concerns

What is the Flexbox order property for?

The CSS display: flexbox; has the property for its flex-items order. I'm not sure what this property is for. Does this not conflict with the concept of separation of concerns?

Similar to HTML's dir attribute vs. the CSS direction:rtl; if the HTML dir is more appropriate than the CSS direction:rtl, it stands to reason that so is the case with the flow, structure, and directionality.

Because directionality is an integral part of the document structure, markup should be used to set the directionality for a document or chunk of information, or to identify places in the text where the Unicode bidirectional algorithm alone is insufficient to achieve desired directionality. [...] You should therefore use dedicated bidi markup whenever it is available. Do not simply attach CSS styling to a general element to achieve the effect.

- Direction (LTR/RTL): What's the difference between the CSS direction and HTML direction attribute?

Not that I am complaining; I just had a project where the just changing the order was so easy rather than editing the HTML. But still, the question stands.

Solution

  • The order property is intended to allow you to place relevant content of a page (the reason someone is ostensibly on the page in the first place) first in the DOM, while still achieving certain layouts like the 'holy grail' layout (header, content, footer, with a sidebar on either side of the content) without resorting to very awkward hacks.

    From the W3C Flexbox Specification:

    Many web pages have a similar shape in the markup, with a header on top, a footer on bottom, and then a content area and one or two additional columns in the middle. Generally, it’s desirable that the content come first in the page’s source code, before the additional columns. However, this makes many common designs, such as simply having the additional columns on the left and the content area on the right, difficult to achieve. This has been addressed in many ways over the years, often going by the name "Holy Grail Layout" when there are two additional columns. order makes this trivial. For example, take the following sketch of a page’s code and desired layout:

    <!DOCTYPE html>
<header>...</header>
<main>
  <article>...</article>
  <nav>...</nav>
  <aside>...</aside>
</main>
<footer>...</footer>

    image of a 'holy grail' layout

    This layout can be easily achieved with flex layout:

    main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }
main > aside   { order: 3; width: 200px; }

    This allows for faster loading of the content, which is a direct concern of user experience.

    Coincidentally, it also makes it really easy to reorder flex elements for, say, a mobile or responsive layout. I wrote that answer to illustrate how trivial it is to do this via CSS. Changing the DOM order itself would require different HTML pages based on your conditions for different orders, or JavaScript. In either case, it can break assistive technology or user scripts that users might have which depend on the DOM structure. It's also more complex/more effort to maintain that vs CSS which you only have to write once.

    But does this not conflict with the Separation of concerns?

    No, HTML's concern is content. CSS' concern is presentation. The order in which sibling elements are presented on page is a presentation matter, no different from whether they should display horizontally, vertically, be centered or side-aligned, etc.

    For further reading, see: Use cases for order on MDN