Getting Around CSS Cascading Limitations via Flexbox

Flexbox is what the box model should have been from the beginning — it unlocks hundreds of interesting layout permutations, while simplifying ultra-common needs like vertical centering, “golden layouts”, and equal-height columns.

If you haven’t already dug into the brave new world of Flexbox, I highly recommend this small game: Flexbox Froggy

I know what you’re going to say… “but Evan, you can’t write a selector expression that will affect an element before the target one, CSS is cascading!” That’s entirely true, but it doesn’t mean we can’t cheat a little 😏: enter the Flexbox “order” property.

From MDN’s article on order:

The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.

The special sauce here is that we can now rearrange things in the DOM to create the cascading pattern we need, while maintaining the desired visual order at the same time. An example:

Susie wants to recolor an input’s label based on the input’s validity state. The label should appear before the input. Let’s code it!

tl;dr order allows us to arbitrarily arrange content to avoid the pitfalls of cascading styles.

Poetry, tech, other pursuits. 🏳️‍🌈

Poetry, tech, other pursuits. 🏳️‍🌈