Thoughts on teaching logical properties to new students of web dev
I teach high school computing studies (~15 year olds) and we do a unit on web development, where of course I want students to fall madly, deeply in love with CSS 😉. I'm wondering what people's thoughts are on teaching logical properties instead of directional ones. I really like margin-inline and margin-block for example (and they are nice shortcuts in themselves!) but some, like border-end-start-radius I can see being more problematic for first-timers. It's not like we'll be creating real-world sites that will be translated into different languages and writing directions, but I think it's important that inclusivity and accessibility are considered. Some people think they make CSS easier to learn (https://chriscoyier.net/2023/05/02/do-logical-properties-make-css-easier-to-learn/), but what does the collective brains trust on here think?
Chris Coyier
Chris Coyier
Do Logical Properties Make CSS Easier to Learn? - Chris Coyier
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] C...
4 Replies
I think it makes more sense to teach the "directional" way (I guess directional means
margin-left ?). It cannot be clearer what it means: margin, on the left side. Whereas margin-block could be easily understood as both x-axis or y-axis since blocks can be stacked on top of each other, like Tetris, or pushed next to each other to build a bridge... or row, like in Tetris.
See what I mean? The minute you leave things up for interpretation you are going to be making assumptions that may not hold true for everyone. One of the clean code principles says that, when given the opportunity, make things explicit rather than implicit.
The cool thing about CSS is that there are many shortcut properties that you can and should use to simplify things. But these are not very useful if the fundamentals are not very well understood.
Another example of what a student may wonder: why does margin-block add margin on both the top and bottom sides of the element? A little history on the margin shortcut answers that question, since it can be used in many different ways but always following the same pattern.That's an interesting question (and one better suited to other channels, as it's not a code-specific question but rather a discussion point :p) but [I'll allow it].gif
On the one hand, logical properties are very well supported and by teaching them you're also reinforcing the CSS box model (and clarifying flex direction!).
On the other hand, WTF is
border-end-start-radius!? Not very intuitive. Although I rarely see individual corners done and usually it's just border-radius for all 4.
As a unit on basics of CSS I feel it's important to teach modern, responsive, and accessibility-focused code. Logical properties fall in the last category as they work correctly for RTL, LTR, TTB, etc. margin-left doesn't do the same for a RTL language as a LTR.
Personally, I would suggest teaching the logical properties (perhaps shortly after teaching the box model to help reinforce that) and then mention the "directional" options ("In the beginning, we didn't have language-aware properties and the brutes in the English-speaking world ran amok and cause havoc. These are their stories…"). Give a few-minute description on the difference between margin-inline-start and margin-left and leave it to them to decide which to use. But when teaching only use the logical properties to encourage them to use the more semantically-appropriate option.@thevanilla13eck I was thinking along the lines of what you have said here, especially in covering both types. Students will naturally look for other examples in their CSS journey and if I've only taught "inline-size" and then they see "width" it's going to be confusing, and they'll probably be a bit pissed off. Interesting that in Kevin's video today he believes that they will soon become the norm.
If it's a matter of how to approach CSS in a manner that is entertaining and interesting, bear in mind that CSS has been notoriously difficult to learn for even bright and skilled programmers. Whichever option you choose, keep things as simple as possible. In teaching any subject, best practices and optimizations are often ignored in the interest of getting the message across. This is why I would prefer for the "path of least resistance" and teach concepts that are easy to understand and let students explore the moderns ways on their own, maybe after a gentle introduction to give them something too look for.