How to teach new Padawans CSS sizing properties?
For blocks there is two ways of doning things classic or logical
width/height or inline-size/block-size
{padding,margin}/{padding,margin}-{inline,block}
What should a new studen learn (first)?
9 Replies
both?
I feel like what you define as classic is pretty easy to grasp so it can be introduced and then you could simply transition that to using logical properties for the proper reasons.
that transition might even help them understand why which is as important as the actual thing.
The box model
But the hello world equivalent is just using named colors on text.
I think the title of this thread is little bit misleading as OP actually wants to know about how to teach sizing, not anything.
Also are they teaching people from Padua or new Jedi (Padawans) 😄
I had to reread the post before seeing that this is true.
Thank you autocorrect..... 🤷♂️
I asked a couple of AI's the same question and two agreed to stick with width and height for beginners. It is unfortunate certainly for beginners that the common word "width" results not always in the exact width being used. using inline-size sounds more like something that might be a width but not necssarely is.
Personally I’d teach with the logical properties as they’ve been supported for a long while now. When introducing them be sure to mention,
“You might run into width/height in existing code bases. And here’s how they compare…”. That way you cover both and stick with more responsive units.
As for asking AI, of course they’ll say width/height! that’s what most of their training data uses since it’s been around longer lol
It also depends on the context, if those newbies come from a design context, they might be used to tools like Figma, PS, AI where width is such a common thing that starting there and then moving to logical properties would be a good way to introduce the topic. If they are developers then it would be easier to just skip the w-word.
In my HTML & CSS for beginners, everything is done with logical properties. The only reason I mention the physical variants for things is to say "you'll see a lot of people use this instead"