Become a Creator today!Start creating today - Share your story with the world!
Start for free
00:00:00
00:00:01
Should We Stop Teaching Width and Height to CSS Beginners?
830 Plays29 days ago
The survey link (I lied, it's 3 questions, but they're all super short!): https://3g5kprf8905.typeform.com/to/laWyvkB6
In this episode, I talk about why I think we should appreciate browser defaults more when writing CSS, and ended up having a mini lightbulb moment about teaching CSS - maybe we shouldn't introduce width and height properties right away to beginners? It seems like that just creates habits we have to unlearn later.
I talk about how block elements naturally want to take up the full width but only be as tall as they need to be, and why working with these behaviors (instead of fighting them) makes for better responsive designs. I go on a bit of a tangent about setting constraints with min/max values rather than forcing exact dimensions.
Along the way, I point out some common mistakes I see a lot - like using that universal reset with the star selector (please don't do that!) or declaring the same font-family fifteen times when you could just put it on the body once.
Recommended
Transcript
Introduction & Podcast Overview
00:00:00
Speaker
Hello, my front end friends, and welcome to my podcast, General Musings. My name is Kevin, and in this podcast, I talk about whatever is front of mind for me in any given week, usually in some way that's related to front end development.
CSS Discussion & Community Question
00:00:11
Speaker
And this week we're staying very much on topic because we're going to be talking specifically about CSS. Recently, someone over in my Discord community, which is linked down in the show notes, if you're interested in hanging out with other front end developers and getting help with your front end and sometimes back end problems, some people, there's a few back end devs in there as well.
00:00:29
Speaker
ah Yeah, this person was asking about a sane way to start a project because they were feeling frustrated, which I think we can all relate to at times ah with CSS specifically. specifically And ah they felt that a lot of the user agent styles were actually getting in their way and they were having responsive issues and other things.
Browser Default Behaviors & Styling
00:00:47
Speaker
And they asked if it would be a good idea to do the star selector with an onset all on it, which thankfully, before I saw the thread, a few other people had got there first to quickly reply and say, please don't do that because it's a really bad idea.
00:01:03
Speaker
And it made me start thinking a little bit about this, where it's a topic I do bring up from time to time because I see a lot of people don't appreciate the default behaviors that we have.
00:01:16
Speaker
And I think it's really important to think or not to think of, but to to see The defaults that come with the browser as a mostly sane starting point.
00:01:27
Speaker
And i mean, for example, most elements are block elements. And if we did an onset all with the star selector, it would throw all of that in the garbage. Like everything becomes inline because inline is what something is before the user agent style comes to say, no, this should actually be block, which is kind of interesting.
Understanding Element Behaviors
00:01:45
Speaker
often don't realize that unless you do a unset all on things and you probably don't want to be going and having to declare a display block on most things since we probably want that as the default on the elements that already have it.
00:01:59
Speaker
But beyond that, even like talking about inline and block elements, they have default behaviors themselves, right? Like not things that are coming even from the user agent styles. because they have both a width and a height of auto on them.
00:02:13
Speaker
But the width and the height of auto works differently for the two of them. So like the auto behaviors and these defaults that are on these elements are specific to how they work.
00:02:24
Speaker
And we don't always appreciate how good those auto or default behaviors actually are. The things we do talk about a lot of like, say, with the block level element, we talk about how when you create block level elements, they always create a line break, stacking one on top of one another.
00:02:39
Speaker
And that's obviously a handy thing and a good thing to know. And once you understand that, you're OK, these will always stack. And then we often learn about the box model at the same time. Right. We can set it with a height or margins or borders. But what isn't really talked about is what I was talking about is like those auto things like what is happening. And I i guess to a certain extent it is you hear, well, OK, it's taking up all the size.
00:03:04
Speaker
Sometimes you see like, oh, put a background color on there and you can see that it's actually big, even if you only have one word in your paragraph, for example. But we sort of gloss over a lot of how though that part of it works because you're like, oh, it is this big and it only is as high as the content.
00:03:20
Speaker
But then we can apply a width and a height and you make your box and your text fits in your box because you're doing very beginner stuff. And at that stage, it makes sense to sort of understand things in that way.
Teaching CSS: Rethinking the Approach
00:03:31
Speaker
But I don't think there's enough emphasis that's put on to what's happening before we put it within a height, because these days, like, are you really declaring it within a height that often? And we have to learn that these properties exist. I get it.
00:03:44
Speaker
Which makes me wonder, do we need to teach beginners like super early on? Should you really be learning about width and height? I recently put out a new course on like HTML and CSS for absolute beginners, and I probably did. um I'm assuming I did.
00:03:59
Speaker
And I've been changing a little bit about how I've been teaching things lately, like the order that I teach things in. to We always i find like all the paths for learning, especially the beginner material, follow a very similar order.
00:04:13
Speaker
And I've been trying to think about like what would be the more useful order to learn things in? Like I'll teach grid now before Flexbox. That's the big one. I also teach positioning much later on than most people do because I feel like positioning is like you should understand layout with Flexbox and grid before you worry about positioning because that's sort of like the bonus. Like, OK, now I need to make these tweaks.
00:04:34
Speaker
Bonus isn't the right word, but It's about like tweaking what you're already controlling with the other layout methods you're using. Because I'm sure, I don't know if you're like me, but when I had learned about position absolute, I was like, oh, why am I bothering with all this other stuff? I can just tell stuff where to go.
00:04:49
Speaker
And then everything just falls apart. It's like the most fragile way to build anything. And that was even... before we had like I was doing this with static websites and it was still fragile. So like these days with responsive things, it's even more fragile and and would be really hard to create something that way. And yeah, I had an outline that I've been following for this and I've completely gone off track thinking about this width and height thing of like, should did we teach people width and height early on, we need to I think it's important to learn the box model and they have the content. I actually am curious now because we used to need width and height.
00:05:25
Speaker
Well, width anyway to make layouts like when we're going back to what I was saying, like static layouts and then we had the float based layouts um where you had to declare widths on things to be able to make a float based layout with grid and flex box these days.
00:05:41
Speaker
You don't need to. It comes in handy. It's important to do. I almost feel like you could get around to those a lot later on, like margin padding borders, 100% learn that at the beginning.
00:05:55
Speaker
But like, say you do margin padding borders, And then you learn you can make a box, but the boxes are still stacking. So then you have to add either flex box or grid to actually make things to go next to each other.
Embracing Default Behaviors for Design
00:06:05
Speaker
And then you're not using the width again.
00:06:07
Speaker
I almost feel like width should be something that's taught later on. Hmm. That's interesting. I'm not about to redo that core. Oh, should I? Hmm. We'll see. I'm very curious about that now.
00:06:18
Speaker
I think that can be brought into like later things because of how width. OK, I'm way off topic and I'm i'm on it. This isn't what I was planning on, but width is more useful than height in general. It's something that will be declared more often, but like within the Flexbox context, it has certain things that are important within grid. You're not going to be using widths too often.
00:06:42
Speaker
The default behavior there works well. We're going to circle back to those defaults in a second. And what I was the whole point I was making with this, but the defaults make more sense there, right? Because they are that just takes up the size of its cell. And like, I guess you could use a percentage to be like, I don't want you to take up the whole size.
00:07:00
Speaker
i I'm trying to think and like, I guess icon sizing and other things like once you get outside of layouts specifically and you're like, oh, I need this icon to be a specific size, then you're actually setting just a width and a height on it.
00:07:12
Speaker
So I guess it depends on the context a little bit there as well, where sometimes you just have those fixed sizes. But I feel like, again, that's something that can come in a little bit later. Images have the responsive issue, but that's where we can just set a min width of 100 percent, max width, max width of 100 percent. we're we're good to go on those.
00:07:34
Speaker
I almost feel like you don't need to cover with and hide early and it leads to very beginners having bad habits is where my thought process of this is going. This circles back to what I was actually just thinking about, because i think in my big thing is we want to embrace what the default behaviors are.
00:07:53
Speaker
that was sort of my outline of this podcast originally, where the default on a block element is to be the full width and the height is to be as small as possible. Right. So 100% well, it's auto. It's not quite the same as 100%, but it's taking up the full width of its parent and zero high as the parent gets bigger or smaller. The child that's a block element will match that. And that could be as the viewport gets smaller, everything's getting smaller. So eventually that child's also following along with that.
00:08:20
Speaker
And then as that's getting narrower, the content inside of there is growing as the text lines are wrapping and other things. So the content is getting taller, taking up more vertical space.
00:08:31
Speaker
And so the element is growing in height to do that automatically. It wants to be zero pixels tall, but it adapts to the content and grows to match the content that's inside of it. And within most of the context that we create layouts with anyway. So that's there is that distinguished thing, right, with thinking about layout it versus like the small little components or something. But even then, like if you have a tag, you don't want to set a width and a height on a tag.
00:08:55
Speaker
And I see people do this all the time. You have a button. and they set a width and a height. The amount of times I've seen a button with a height on it and then they're using Flexbox to center the text in it. I'm just like, just put a little bit of padding top and bottom, please. You're going to get the exact same thing, but it's just so much more robust because if you set a height on it and then you change the font size, now you need a new height on it. right And these are all things that we all learn over time. Like I remember back in the day with navigations or headers and stuff, um because it used to be this is before Flexbox. It's hard to center things vertically.
00:09:28
Speaker
And so you do that, you'd set a height and then you would set, you know, try and play with it in magic number your way there. And then the trick that you'd learn is that you could set a height and then set the line height of the text inside of that to match the height of the element.
00:09:42
Speaker
And then it would actually center the thing if I'm remembering right. Hopefully that's what the trick was. I know there's a line height trick to set vertically centering. But then, of course, if you ran out of room a little bit and then the text wrapped, you just have these huge line gaps. So you're like, yeah, that's not the right way to do it. The right way to do it is just use some padding and get it to the rough height that you need.
00:10:01
Speaker
And yeah, I feel like the if we avoided teaching people in the very early days, like you get day two, you get a CSS, you get around to saying, oh, by the way, you can set a height. But have you noticed we never had to do that until now?
00:10:16
Speaker
um So like there's specific times and.
Efficient CSS Practices & Code Maintenance
00:10:20
Speaker
I think we could put a lot more emphasis on the default behaviors and the way they're working and then leaning into those defaults.
00:10:27
Speaker
Right. So setting if you need if your content is getting too wide as the viewport is getting bigger and bigger and you're on an ultra wide, you don't want to have to like move your head across to be able to read the text. So while we're working with those default behaviors, it wants to be as wide as possible.
00:10:43
Speaker
So then we can set a maximum width or if you want to use the logical property, a maximum inline size and then stop it. I'm going to not mention it's easier for me to talk out loud with width and height.
00:10:55
Speaker
But if I was writing the CSS, let's just assume I was using inline size for width and block size for height, which if you don't know, those are the logical properties to go with those two. But yeah.
00:11:06
Speaker
Right. So my my content is getting wider and wider and I want to allow it to shrink when the viewport is getting smaller. because That's a good behavior. i want to lean into that default and I just want to set the constraint of a maximum width to prevent it from getting too wide the same way I would take that approach on height. But height, I have to think about it. The auto is the opposite.
00:11:26
Speaker
It wants to be as small as possible. That's a good behavior to have. That works well for me. If it wanted to be as tall as possible, and don't I don't think we could make websites. Everything would just fill up the viewport and it would not work.
00:11:38
Speaker
We want it to be as short as possible, but to adapt to the content that's fitting in there. But maybe it's too short in some situations. I need it to take up the full viewport. But if I have lots of content, maybe because my viewport got an hour I just added more content to there, I don't want that content to overflow. I do want to allow it to grow if it has to.
00:11:56
Speaker
So I work with how the browser wants to work. And I set a constraint on it saying I'm going to set a minimum height. And then if it needs more room, it is allowed to grow. And like, that means we have responsive things.
00:12:08
Speaker
But I mean, if I didn't even set those constraints, we have responsive things. Everything just works. But we lean into and keep that responsiveness by setting the constraints on it instead of trying to force matters and and do what we want to do.
00:12:19
Speaker
And I think we would solve so many people's and beginners problems if we didn't teach with. And I'm like convincing myself more and more as we go through this. Let's stop telling people early on, like first week of learning CSS, you you don't know that width and height exist.
00:12:34
Speaker
We show the min or max versions of them, but we don't tell them that the actual property, right? And then they surprise them later on. ah Once they've built up the good habits, then work with a lot of just how things are working. And I think that would just really help reinforce things and also make them realize we don't need to set these things because it's intuitive to want to set a width and a height on something. I see ah design I'm trying to match. I'm going to so make it that size and then I'm going get the content to be in there. That's how I would do it with a design software. So why wouldn't I do it in in the CSS? Right. And it's because that's a bad idea. But then we have to learn why that's a bad idea. and We have to unlearn those bad habits that we've built up where we just could just not teach it that way in the first place.
00:13:15
Speaker
But I guess so, yeah, if you have a friend or something that's learning it, don't tell them about them, I guess is where I'm getting to with all of this. But or if you're in a boot camp right now, you're an instructor to boot camp. Maybe there's five people listening that are in that situation, but just something to think about a little bit um where, yeah, I know, you know, in the boot camps, you don't spend a lot of time talking about CSS. So like, just don't mention within height.
00:13:37
Speaker
Simple again, max, min, those are fine. Don't mention the fixed ones, um because even with as a percentage of these days, how often do we really need with as a percentage these days?
00:13:49
Speaker
Trying to think times I'm using it again. It's more about like sizing small icons and other things. And with percentages I don't use for sizing stuff very much. We have all these other contextual units that are much more useful.
00:14:02
Speaker
um I'm trying to think. I can't think of any specific use cases. I guarantee you I do use per percentage at times, but it's one of those more niche units now ah with with the types of things that we're building compared to what it used to be.
00:14:16
Speaker
um Even I guess I have used it with like a grid template. columns and stuff, but that now we're getting way beyond setting widths in doing that. And we're setting there, you're actually setting a width in a different way anyway. Right. And you're just setting like this is the the column size and then the element will just fill that space up.
00:14:32
Speaker
So it's exactly that's sort of how we create layouts now anyway, isn't by saying widths and heights on things. It's about setting up the layout and making things fill in those spaces that we've created. Or we're going the flexbox route, which is where based on the intrinsic size of things anyway, that's less based on the size of the element itself. um Or well, the element is sizing itself and each one is kind of independent type of thing. You know what I mean? and ah Wow, this I got a lot more complicated and on a little rant there than what I wanted to. But I guess the main thing is we can't tell the browser or we shouldn't be trying to tell the browser exactly what we want it to do, ah whether that's you know working with a fixed size or whatever. And ah I'm saying this in the context of width and height, and i'm sort of stuck on that a little bit because of this.
00:15:19
Speaker
mini revelation that I've had about teaching, but I think it applies to like everything we do when it comes to CSS, where we always want to be conscious of what's already in place, like what's happening now on before I write a line of code.
00:15:34
Speaker
And so this can be a width even again, I'm bringing up with as the like another mistake I see a lot of people do is a width 100 VW on the body. because they want the body to be full size.
00:15:45
Speaker
But it was already doing that. It was already filling up that space. And 100VW actually now will go underneath the scroll bar on Windows. And anytime there's a fixed scroll bar, and then that causes horizontal scrolling. And there's all these problems that come from setting or declaring things that we didn't need to declare. Or we just, you know, to go into other properties, we, or not we, but a lot of people,
00:16:08
Speaker
over declare things that could be inherited. Right. I see declarations for font family over and over and over again when it could just all be placed on the body because it's the same font family meaning applied everywhere and you want to change your font family. Oh, and I guess you we can do a control find replace type thing, replace all the font families. But I could have done that one time on the body and that would have been a little bit easier and it's a lot easier to maintain you don't have to worry about forgetting it in one place or another.
00:16:37
Speaker
And those like we don't need to do that. So we shouldn't do that, I guess,
Episode Wrap-up & Listener Engagement
00:16:42
Speaker
is is the main thing there. And we should only declare something if we have it not by explaining why we're doing it, but by looking at the screen with what we currently have and saying, OK, I need this thing to be different from what it currently is right now, if that makes sense.
00:17:00
Speaker
All right. So if I look at it and go, the font family is currently wrong and I'm going to change it. rather than just having full screen VS code without looking at my browser and just writing in all the CSS that I need, which just lends itself to writing a whole bunch of CSS that you don't actually need because those things are already in place and less maintainable code, a lot more stuff going on for no reason.
00:17:24
Speaker
um It just becomes a little bit of a nightmare. And I find that's one of, again, another thing that a lot of people do. And I see a lot of, and it's one of the things I help people fix a lot of the time is that type of over declaration on things that they never needed in the first place. So yeah, I, I'm going to link to a survey and the survey I'd planned to link to this anyway, and it was gonna one question survey. It's now going need to be a two question survey because I want your opinions on whether or not ah my idea on not teaching within high is a good thing or not. And ah so the first question will be that it would be just a yes, no, you checkbox. I don't know. It'd be something a yes, no question. You just click on the one that you want, maybe radio buttons or whatever, and you can hit submit on that one.
00:18:05
Speaker
And the second question is because I want to know more about you and who you are. So it's a one question thing as well, just about what the listeners of this i want I have an idea of who who my viewership is because I think it's going to be a little bit different from my main channel. I don't have a great handle on that either, to be honest, um but I have my regular newsletter. I'm sure some people that are listening to this are also newsletter subscribers, um but I'm just trying to gauge what audiences are listening to which of my content right now.
00:18:35
Speaker
to know more of what I should be talking about across. but i mean, my main channel is CSS tutorials. That's what it is. This one is sort of CSS tutorial, but it's a talking head one.
00:18:46
Speaker
um But and I want to know, like, should I focus more on this type of content or should I be focused more on some of the other things that I've talked about here? Do I do more interviews? Is it more anyway?
00:18:58
Speaker
trying to figure out the type of content I want to do specifically on this channel. And so there'll be one question. So the whole thing should take you like 10 seconds to do once you click the link. That's my goal for it. So just click answer the no question. The other one will be like a select menu. You can just our multiple choice probably where you can choose multiple things.
00:19:16
Speaker
I think that will be what it is. um Just so I get a better idea of the type of content I should be delivering to you and and who's listening to this because this channel is actually growing in size right now. It's starting to gain a little bit momentum.
00:19:28
Speaker
So I guess I'm already doing the right thing, but my topics are all over the place and maybe that's what people want. and I'm also going to continue just talking about whatever is front of mind for me in any given week. But if I can shape what that thing that's front of mind for me in any kind week is or give it a little bit of direction, um I'd probably more...
00:19:48
Speaker
often than not steer it that way, but there'll be divergences and and wiggles and other things and all of that from time to time as well. So because I do want to keep it pretty casual here and pretty relaxed, pretty low key compared to my other things. Now, you know, I'm not doing any on screen graphics or like as I was going through all of this.
00:20:08
Speaker
I was thinking like, oh, it'd be cool to have like the onscreen graphics showing some of the things I'm talking about. That's not what this channel is about. I'm not going to I just don't have the time to do it, to be honest. um But um yeah, we're keeping this channel low key, but having a little bit of direction to it.
00:20:24
Speaker
would probably be a good thing. um It already has some, I guess. I just want to know more about you, I guess. with you I don't know. I'm rambling now. Usually when I hit this rambling stage, it tells me that it's time just to stood wrap things up. So i'm going to wrap things up. Say thank you so much for listening. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome. And please go down to that link and take the survey. i would really appreciate it. Thank you very much. Bye.