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-rightin LTR, but as soon as you’re in RTL, they become different).
- Conflicts feel weird. — A property like
padding-inlinedoesn’t exist in non-logical-land. So will the value set in
padding-left, say? Or will
padding-leftwin 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-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 bottomand all that still. Jeremey noted several more:
translateis still an X/Y thing.
getBoundingClientRect()doesn’t return logical properties.
aspect-ratiois 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.