Do Logical Properties Make CSS Easier to Learn?

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:

topleftrightbottom, 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.

Beforeas Logical Property
resize: horizontalresize: inline
text-align: righttext-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 work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen Pro

One response to “Do Logical Properties Make CSS Easier to Learn?”

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️