Why arent logical properties taking over everything? Chris Coyier

March 13, 2023

They are just better than their non-logical counterparts. Because:

They are more, ahem, logical. They make CSS into a more coherent and interrelated system that is easier to learn and reason about.

They ready websites for language translation.

So since they are better and support is green across the board, why aren’t they taking over all usage?

Old dog; new tricks. — People gotta know about them and understand them. Then come to their own conclusion that they are better.

Legacy projects. — Most people work on old/existing things. Changing all these properties over at once doesn’t feel like a particularly good use of time on most projects. That work will be error-prone. The alternative to an all-at-once move is to slowly move usage. That puts you in a tweener stage of using both syntaxes, which feels sloppy and extra error-prone, because the properties aren’t one-to-one (e.g. margin-inline-end will override margin-right in LTR, but as soon as you’re in RTL, they become different).

Conflicts feel weird. — A property like padding-inline doesn’t exist in non-logical-land. So will the value set in padding-inline override a padding-left, say? Or will padding-left win over what is happening in padding-inline? I don’t know, lemme test… it appears that whichever is declared later in a block wins. I guess that makes sense in the same way padding would override padding-left, it just feels weird as they aren’t one-to-one. I suppose, like logical properties themselves, you just have to wrap your mind around how it works: if a non-logical and a logical property currently affect the same thing, it’s a specificity (including source order) game.

The rollout doesn’t feel totally done. — Not all directional things in CSS are ready. For example, you might be setting a gradient in which to set text over top of, but directional linear gradients don’t have any logical values yet, it’s still to left and to bottom and all that still. Jeremey noted several more:

translate is still an X/Y thing.
getBoundingClientRect() doesn’t return logical properties.
aspect-ratio is width/height not inline/block.
… and also that you can’t use a lot of comfortable shorthand because they map to non-logical values.

I don’t know that I have any killer advice here. I know that my own brain has done OK in flipping modes and making me think in logical properties now. And yet, I don’t have any production sites that are 100% logical properties. Despite it feeling weird to have tweener CSS, that’s probably reality for some years. Except for sites that are heavily translated — all y’all should be all-in.

🤘

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgaHxyf46wn7Jlkaeyr8CMpaagoZOWuW680ainnqqknrK0edOaoqKml2K8t7HRZpyvnaKuwam1zaBm

Related