Order, please! ...or not...

It's a new week, and it's a new comic. This time, it goes "back to the roots," as I wanted, and it is more related to a CSS property: order. The CSS code user in the comic is also in the code that generates it.

The books in the first panel have different order values, but in the third panel, I applied an "order: unset" that puts all the books back in their original order—which is part of the pun. It makes no sense that unsetting the order puts the content in order.

While I poke fun at Tailwind again with the book series, this is an example of where Tailwind would be convenient. Let me explain: I've been drawing these comics that look similar because they are a copy-paste of each other. Sometimes, I forget to remove some of the previous code, which "pollutes" the CSS code. If I used a utility-first CSS library to generate the comics, it would be cleaner and friendlier (not the HTML, though).

The "...or not..." part of the title

While using the order property may seem like a great idea in some cases, it needs to be used with caution as it may negatively impact the page's accessibility. People usually expect the visual order to be the actual order of the elements. Playing with the order may confuse some users, especially keyboard users, who may notice how the cursor jumps all around the place.

So remember: order can be really fun and really powerful. But with great power comes great responsibility. Don't break the site!

I may add a note about it on the blog.