I recently said yes:
They make CSS into a more coherent and interrelated system that is easier to learn and reason about.
Jim has doubts:
top,left,right,bottom, those directional properties are tied to my everyday experience of physical reality so they are easy to understand. They’re intuitive.…
… I’m not convinced [logial properties make] CSS “easier to learn”.
Agreed, there is something immediately apparent about top, left, right, and bottom. Despite my 5-year-old daughter’s confusion with right and left, I think she’d have a harder time with “the end of the inline document flow”.
My point is more about reigning the language in. Once you’ve got your mind wrapped around what the inline direction is, that word can be used for all sorts of relevant properties and values in a way that makes consistent sense.
| Before | as Logical Property |
|---|---|
| width | inline-size |
| right | inset-inline-end |
| margin-left | margin-inline-start |
| overflow-x | overflow-inline |
| resize: horizontal | resize: inline |
| text-align: right | text-align: end |
Imma say that right (ahem, inline-end) side gets the 🏆 for consistent sense.
It’s not a huge thing, but consistency in language is a factor in how difficult it is to learn.
That said, because the logical properties don’t replace the non-logical versions and that there are still reasons to use the non-logical versions, thus only expanding the language… well, I can cede that makes CSS as a whole perhaps a smidge harder to learn. 😬
I agree. The moment I learned what block and inline actually meant was a total unlock for me early in my career as a developer. So perhaps logical properties do make it a little less intuitive coming in brand new or having used the TRBL properties, it jives much better with the way CSS works in my opinion.