Do Logical Properties Make CSS Easier to Learn? Chris Coyier

February 2024 · 2 minute read

May 2, 2023

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
widthinline-size
rightinset-inline-end
margin-leftmargin-inline-start
overflow-xoverflow-inline
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. 😬

🤘

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdganxxfo6dpmakn5y2pK3LZqerp6Cav7W1xKxkppmbmnqkv9JmnJqrmZq%2FbsDOZqOemaKjfA%3D%3D