Learning CSS in 2023

Hello, JS Party people! It’s me, Kball. I get to be your host today. Welcome to another episode of JS party, your favorite podcast - I hope - about JavaScript and the web. I am joined today by a special guest, someone who has the best name… I say as Kevin who goes by KBall… Special guest, Kevin Powell. Kevin, welcome!

Yeah. Thanks for having me on. I’m looking forward to it.

I’m excited. Well, and you were actually a requested guest. There was an anonymous listener who said, “Hey, I would really like to have Kevin Powell on the show. He’s really good at teaching CSS.” And that is what we’re going to talk about today; we’re going to talk about CSS, and how to learn CSS… And CSS has come a dramatically long way in the last couple of years, and so if folks have not tuned in recently, there’s a lot of new stuff to learn there, and it’s so much more pleasant than it once was.

But before we dive in, I want to do a quick promo, which is the State of JS survey is open. We’ll put a link to this in the show notes. We always like to promote this each year, to get a more diverse set of folks responding to that. Spoiler alert, if you like Kevin today, you like his resources, you watch his videos, you can actually vote for him under Video Creators in the Resources section. He’s there. You can also vote for JS Party in the podcasts. We are hoping that this will be the year we finally beat Syntax in the survey to be the number one JavaScript survey in State of JS. We’ve been climbing over the years, and YOU can help us get there. But anyway, brief promo aside - let’s talk about you, Kevin. So tell me a little bit about your background, and what you do, and how you got into it.

Yeah, so I have a bit of a non-conventional path, I guess… I never really knew what I wanted to do, basically forever…

I still don’t.

Yeah. [laughs] So I started – I actually have a degree in film, and BA, in urban planning… So I never had any ambitions or anything to do anything with the web, really. And then after I got my BA and realized that I’d probably need a master’s if I actually wanted a job within that realm, and not wanting to do that, I ended up going back to school for design, because I was someone who always played around with Photoshop, and liked doing designy things and just mucking around, and I found a vocational program; it was like 18 months.

And so I did that, got a job… And actually, it was a really good job for the experience, but not for the pay, so I started freelancing on the side. And most of the freelance work was UI design stuff, like website design stuff… And I’d been making websites as a hobby since high school, in the late ‘90s, and just sort of “Oh, part of this RPG thing, I’m gonna make a website for it, and then set up the forums, and do all of that.” And then a year later, I’d find another reason to dabble in it. And it was always something that I’d come back to just for fun… So when I was doing the design work as freelance, I was “Well, if they’re paying me to make the design, they’ll pay me more money if I’m also making it into an actual website.” And that’s sort of how I started taking it more seriously, instead of just some random hobby that I always just saw it as before that.

I did that for a number of years, and then I ended up getting hired at the old school that I’d gone to for design, and they had just – the curriculum had just got updated, and they’d added a few web classes to it… And it was just a whole bunch of teachers that had been teaching design for 20 years, that didn’t have any web experience, so me and one other new teacher basically became the de facto teachers of the introduction to HTML and CSS thing…

Nice…

So yeah, that’s how I sort of got into the teaching side of things as well.

[06:00] I love it. Well, and I bet the – I mean, my experience has been, if you understand HTML and CSS, your ability to design for the web is greatly improved. You’d never expect somebody designing a painting or thinking about painting not know how paints work. You have to understand the medium that you’re working in.

Yeah. And what I realized, actually, when I was doing a lot of that freelance work was - I was doing like child themes for WordPress as my main thing, and I basically had the main theme turned into the child theme, and then I would just delete the CSS file and keep most of the structure there. It was sort of like a CSS Zen Garden style, where you have this blank thing, the structure is in place, but I would design it to match sort of what I wanted it to look like. And for me, that was so much fun. I loved it. It was a puzzle, and you’re just solving this visual puzzle, I guess, of like “How can I make that actually happen?” with the constraints of “I’m sort of stuck with this theme, to a certain extent.” You could add functionality and go into the PHP and stuff like that, but the part I really liked was that; and I think that’s what made me realize that this is a lot more fun than actually designing stuff as well.

Yeah. Well, I love that you chose a puzzle as a metaphor here, because when I try to describe to folks the difference between writing JavaScript code, or some other type of imperative programming language, and trying to implement a design in CSS, it’s like different parts of my brain. And the closest thing I’ve come to is it’s like putting together a puzzle. It has that visio-spatial aspect to it. That’s just a very different way of thinking about and approaching a problem than “I’m going to logic out how this thing works.”

Yeah. One of the problems with CSS in general - and I definitely have run into problems with it, and been frustrated by it over the years, but there’s not a lot of resources that aren’t extremely dry, as in like the real documentation… There’s really good MDM articles, but they’re these massive things of text that are relatively dry, where it goes more into like the why of CSS, and sort of like one level deeper into like “This is why this happens when you do these certain things”, and a lot of people don’t get into that next step. And that’s, I think, where it can also be frustrating, is there is this logic to how it’s working, but we never really dig deep enough to get to it… Because when you do a color blue and it works, you don’t feel like you need to dive too much deeper into understanding it.

Right, right. Cool. So I’m excited to dig into that a little bit. But first - so you talked about your path, but did we get to how you got into teaching per se? At this point, are you full-time teaching? That’s what you do? So other than the class – how’d you get into YouTube, and all these other different pieces?

Yeah. So when I was teaching, when I got called for the school and when I was teaching there, it started with part-time work. So I was doing part-time teaching and still freelancing… And then eventually, my hours got up to be enough to be full-time. But the problem on that was I finally had a decent-paying job, with job security, and that side was good, but teaching introduction to HTML and CSS for two years straight - after a while, it’s a little bit boring. It’s amazing seeing the progress, because that’s when you’re really taking a student from “I’ve never even looked at how do you do a triangle bracket on your keyboard”, to within a couple of weeks they’re able to make a website on their own. So that’s really exciting to see. But two years of just going over the basic stuff, at one point I was getting a little bit bored… And so I decided to start my YouTube channel as a way of being able to talk about things that weren’t extremely simple, and sort of take the next – you know, sometimes I’d do it to like answer common questions that I was seeing from my students, just because I figured if they’re struggling, other people would be as well… But it was more of just this hobby project for me that gave me an excuse to continue doing things that were beyond the very basics.

[09:52] And yeah, about four years into the channel was when things started really taking off. It took a long time before the channel really got any momentum… But about four years in is when I realized that, “Hey, maybe this is something that– it’s bigger than I expected it to be.” Because it really went from like purely a hobby project, to a hobby project that would make me $12 a month, to a hobby project that was “Oh, this is a nice little side hustle.” And then at one point, I was “Well, maybe it could be something a bit more than that.” So two years ago, I ended up going full-time with content creation around the channel, and courses that I created as well.

So let’s dig into that learning aspect then… And you’ve now had experience teaching very, very beginners - and I agree, that zero to one, it’s really fun as a student, because you go through it and you’re “Oh my gosh, I could do nothing, and now I can do something.” And it’s really fun to see once or twice… But teaching it over and over and over and over again does get pretty old.

But okay, so we have listeners of all different ranges of backgrounds… Let’s talk about how you would start learning CSS. First, if you’re brand new to CSS, even HTML and the web, a brand new programmer, how would you start? And then maybe we can also talk about – say you’re coming from another background. Maybe you have more of a strong JavaScript background, but you’re starting to do CSS, or something like that.

Yeah, that’s a good question, and one that I do – despite having put together a curriculum for my classes on what’s the right approach for it, it’s still something that I sort of struggle with, coming up with the perfect “This is the right order to follow.” And I do get a lot of people too, like “How do I master CSS? What’s the fastest way I can get there?” and I’m always “It depends a little bit…”

I think the beginning is just – it’s the fundamentals of HTML and CSS, understanding obviously what a selector is, how selectors work, so how do you choose the thing on your page that you want to style? How do you do basic manipulation to it? So I want to change the color, I want to change the background color, I want to change the size of it, things like that. And then, I guess – I mean, it’s pretty fast. I think one of the nice things with CSS is because it’s declarative, most of the early stuff you can pick up pretty quickly… So doing those [unintelligible 00:12:03.13] width, height, background color, and things like that… You start to fall into a nice flow with how it works.

The one thing I do know for some people that feels overwhelming early on is remembering all the properties and values, because you need to know the property for everything. And I guess one of the potential mistakes they made with CSS is some of the naming of properties is a little bit strange at times… Because even with all the text stuff, you have the font properties, then you have the text properties, text transform, and…

You have multiple generations of spec designers, who each had their own take on naming conventions…

Yeah. So at the beginning, it can seem like “Holy crap, there’s so much to remember.” But you end up using the same (let’s say) 30 just over and over and over, and within two days of doing it, you just remember them, because you’ve written them so many times… And we have – you know, with modern text editors, and stuff…

There was a class that I was part of when I knew what I was doing, where it was like this old-school teacher that sat everybody down and made everybody open up TextEdit, or whatever… You know, let’s go way back; and they were doing – “Because I had to learn that way, because that’s how things were done in my day, I’m going to make sure you guys learn this way, too.” And I’m like “I understand not wanting autocomplete…” You know, I wouldn’t suggest someone to start with Copilot right now if they’re learning, and just let it do its thing, because you don’t really know what’s going on… But it’s nice if you can write text, and then you can see all the different options that are there, and you’re like “Oh yeah, I need text transform”, let’s say, or text decoration. And just getting that little visual reminder can be also really useful. But yeah, I think early on it’s just making those connections between how do I select something, and then the basic properties of how you can actually accomplish anything… And very quickly getting into layouts.

[13:51] Well, that was one of the questions I had, is do you start with individual element graphical properties, and then move into layouts and relationships, and the things where you have to think about how different things relate to one another? Or do you kind of do it all at once, and then get deeper and deeper as you go? How do you kind of lay out a curriculum that’s going to help somebody learn this stuff?

Yeah. So usually, my introduction to everything is let’s do a very simple informational page about something. It gives you an excuse to have like an H1 – like, let’s say “All about cats.” So you have your H1 is your “All about cats.” Then you have maybe a couple of paragraphs, then it’s a good reason to have a list; you probably can throw an image in there, and throw a link or two in there, and you just have this really simple thing… And then right away, just having a really simple page like that, opens a lot of doors onto “Okay, so how can I select all of my text?” And then you don’t even have to really like – this is the cascade. You just go like “Let’s start by styling our body”, and understanding that too, obviously, but then relying on how inheritance works on that, without really being… Like, I don’t want to hammer home and get too technical when somebody is really new, especially if it’s the first time they’re writing any code at all. I just say like “If you put it here, it’s going to apply everywhere.” We can learn more about like the specifics of that once we need to. I think that like the cognitive overload can be really easy, so just keeping it simple… But let’s change the font size; let’s change the font family. Then let’s set a background color for our body. And then okay, so everything’s changed. Now I want to change just the H1. How do I do that? Now I want to change my first paragraph, but not the second one, so then that brings up the idea of having classes on something.

Right. So really starting with this idea of “How do I identify what it is I want to manipulate, and what are some of the basic options that I have available for me to manipulate it?”

Yeah, exactly. And I think that just by starting really simple like that - like, you can get so much progress done in one day, that people just feel empowered by the end of that. You went from not knowing what code looked like, to being able to put this really simple thing together… And it probably looks really ugly if you’re just – you know, a lot of the time you’re using color keywords, or just like random Hex codes…

But it looks the way you told it to look!

Exactly, yeah. So it’s empowering just getting those simple things done, without overcomplicating things too much; for me is the key. I like trying to keep things as simple as possible. That does get a little bit harder once – because the natural next step is “Oh, I need these two things to go next to one another”, and so how do we do that? We sort of went through like when you had to use floats, and it was hard to explain, but it was the only choice… So you just said “Well you do it, it works, and if you really want to get into it, we can”, to now it’s like “Well, do I teach Flexbox or grid? Which one’s better to learn first?” I don’t want to show both options right off the bat if you’re brand new, just because then it’s –

Too many choices, yeah.

The person needs to make a decision. And ideally, at the very beginning, it’s just like “This is what I want to do. I know if I use this, it will work. Later on, let’s save the harder decision-making for when we have a bit more experience, even if it’s three days of it.” But yeah, getting into which one of those two is better… And I used to be a very big proponent of learning Flexbox first, and then grid, because I think grid is amazing. It has the downside of having a lot of unique values and properties… So does Flexbox, but Flexbox is a little bit different; it sort of does stuff – like, you do a display flex in it, it flexes, and something happens, whereas display grid, you have to do a little bit more… And then there’s so many different new things with it, but the more I’ve done, I actually think that learning grid first makes more sense now… But not learning all of grid, just because there’s so much to it. You don’t need to get into line numbers, and naming lines, and grid template areas… It’s cool things, but you could do something really simple without diving that deep early on. And it’s a little bit more predictable in how it will, behave because you tell it what to do.

It’s much more explicit, at least in the basic versions…

Exactly.

…and explicit is good when you’re first learning.

Yeah, exactly.

Let’s maybe dig in a little bit then, if you’re teaching grid first… And I think my sense is it probably maps closer to how people are naively thinking about how stuff would work, right? I’m gonna lay things out in two dimensions, the way I would expect it… Whereas like flow was always a big mental gap for folks… But I’m curious what you’ve seen, if there are models that are sort of deeper layer that you talk about, in terms of like mental models that help people really grok

grid…

Yeah. So I think when it comes to like most things with CSS, the mistake I see most often, especially from people that aren’t super-comfortable with it, is they over-declare things. So whether that’s just throwing a width 100% on there when it’s a block-level element, that’s just auto-width, and it’s taking up the space anyway… Or if it is creating a layout where they’re being maybe overly explicit on what they want their layout to do… So like if I start with grid, I’m not going like “Let’s build out our entire layout for this whole page, and then all the sub-pieces, and the sub-pieces, and all that.” It’s more like “Let’s put just a regular container wrapper like you’d normally have just to stop it from being full width. And it’s like, now I have this section that needs to have three columns in it. Obviously, for that we could just do a display flex, and your parents to the three items become three columns… But the more you sort of get into different use cases… Because I’ll show the perfect demo, and it works perfectly, and then someone’s going to take the exact same thing, but their content is different… And those three columns aren’t the same size. And then you have to go “Okay, well, this is what we need to do to actually get it to work”, and then it ends up dragging out, or… You know, you introduce an extra level of complexity, and having to dive into that… Where it’s like “Okay, I need three columns, so I’m going to do like a display grid, grid template columns, [unintelligible 00:20:46.27] Obviously, it does mean you have to explain what an fr is, but it’s not that big of a mental… You’re just saying like “Each one is an equal piece. If you did two, that one takes up double…” But it just – it gives them the three columns, and then you can sort of move on from there. That works, it’s my three columns, I’m happy I can move on.

And it’s robust to what’s inside of it…

Exactly.

…in a way that naive Flexbox may not be.

Yeah. And you just sort of can keep on going. And even with display flex, I think the best time to show that is also if you’re doing a navigation or something where you need the item –

I was thinking, a nav bar is like the perfect display flex…

Yeah. Because you have a short word, a long word, something that’s ten letters, something that’s - whatever; it’s all different sizes… You throw a display flex, they all go next to one another, and then you move on. You don’t need that thing where “I need these to be the same size”, and I don’t need to play too much. And if you do need to change the alignment, it’s super-easy to do.

And just by going “Okay, in this situation, grid might be easier to do. In this situation, flex might be easier to do.” And with a lot of those, you don’t have to go into “Okay, this is how you align things in this very specific way.” Or “Here’s how you can span two columns.” Again, keeping things simple. You’ll run into situations when you’ll have to do that, and then you can add that little skill set on top, and find out how that would actually work.

But yeah, I think just relying on just the natural flow of the page is something that people don’t always take advantage of as much as they could… And then just adding in where you need to, and just trying to keep things on that front as simple as possible, and as minimal as possible. The less lines that you have to write to accomplish your goal, generally the better and the easier it is to maintain, and the better it is to understand what’s actually happening.

Yeah. So do you have tools that you use to help people get familiar with grid and Flexbox? I’m remembering I used to send people to Flexbox Froggy, and Grid Garden… I don’t know if those are still the cutting edge of how people learn here, but those were amazing when they first came out.

Yeah, those are still in my list of resources there’s still, like, learn the properties, there’s the Flexbox Zombies as well, which is a lot of fun… And Grid Critters, I think it is… Those have a paid aspect to them, but even the free tier of them is really, really good and fun, just to go through sort of the exercise of gamifying, learning a little bit, which is always good… And because it’s a visual thing, where you’re just moving stuff around, basically… I think those are fun ways to learn for sure.

We’ll include links to those. So it’s Flexbox Zombies, and Grid… What was the other one?

I think it’s Grid Critters.

Grid Critters. Okay. So you’ve got sort of basic layouts you’re kind of going through… Now, let’s say somebody is – they’re comfortable laying things out in a standard design, they are familiar with basic properties, how to change color, and font family, and these things… Where do you go next? What’s your sequence beyond the basics?

[23:45] I think at that point, it becomes very – it’s hard to say “This is the right order to go in”, just because… Maybe the next thing is thinking responsively; making responsive layouts… Because I think – I don’t talk about it when I’m at a very base level, but I do try to avoid setting like a fixed width on something… Let’s just throw a max width on here and you’ll show that “Okay, it stops at that, but if the browser gets smaller, we can shrink down”, and stuff like that.

So from the beginning, I like to try and just sort of not build in the bad habits that you then have to break when you want to make something responsive… And I think that’s one of the really hard things with CSS in general, is understanding that we’re writing the ideal; this is what I want it to look like, and in a perfect world, this is what would appear on the page for everybody… But chances are that’s not what they’re actually going to see. We don’t know the resolution of their screen, we don’t know the color gamut of their screen, we don’t know if they’re using an assistive technology, or an extension to make changes to what it looks like. They might be changing all the colors. They might be changing the font sizes on their side of things. They might be on a really small screen, or they’re on a big screen, but they’re shrinking their viewport way down, for whatever reason. They’re in landscape mode…

We have to sort of give these informed decisions that will work across this gamut of different options, and I think that’s a really hard thing to sort of think about… Because most of the times - even HTML, you’re just putting in “This is the content”, and you know that’s the content. And if you’re writing JavaScript, you’re writing in the functionality and you’re saying “When this happens, do this”, for example, or whatever. It’s a bit more straightforward than “Follow these rules and you’ll get the result that you want.” Whereas CSS, you’re sort of being like – we’re suggesting a best-case scenario a little bit.

So trying to get into that mental model I think is really important… And that’s where I try and just give that idea of using a max width rather than a width on something; the idea of “Don’t worry about heights, because people will set “Well, I need a fixed height on this, because it looks good.” Or “I need three things to be equal height next to each other.” And I’m like “Yes, but as things get narrower, that means they need the same area, so they have to get taller. And if you put a fixed width, then you get overflow, and that breaks everything.” So trying to lean into the natural, or – “natural” may not be the right word… But let’s try and lean into the way things work before we write any CSS at all, where things just happen to be responsive, pretty much; the page will adapt to the screen on its own… And let’s just give it clues to make sure that, you know, I’m setting my max width, so it doesn’t break, and it doesn’t stretch text across my whole thing. I’m not setting fixed heights, or min heights on most things, because then if I do that - or max heights, I should say - because then there’s chances of overflow. And then let’s look – just trying to wrap your mind around that, and playing around with that, and trying to understand sort of the implications of how things can change across different screen sizes and different devices is, I think, a really hard thing to do, but one of those ones that is important to sort of wrap your mind around.

Yeah. It sounds like, if I’m hearing you properly, you tend to approach it from more of a fluid design, rather than like a break point media query-centric approach, which is a beautiful thing that we now are able to do much more of… But yeah, I’m curious – well, one, have you found anything that really helps that lesson sink in? And two, how do you approach this when you talk to people coming from a design background? Because a lot of those folks are used to thinking in very fixed window types of worlds.

Yeah. I think the best way to show anybody, it doesn’t matter what background, what experience they have, is just to show “Okay, let’s put the thing on the screen and show the different things you can run into. This is what happens if I set a width 600 pixels. When I shrink it down, we’re getting overflow. How do we fix that? What’s the solution to that?” And showing different possibilities or different patterns that you can use. I think Jen Simmons coined the term “intrinsic design”, where a lot of it’s based on the browser; just sort of – grid really opened up, and Flexbox too has this, you know, the simplest thing for a navigation. Instead of having to build in a really complex – you know, let’s build a hamburger menu that then has to have certain functionality, and a lot of accessibility concerns, and get all the functionality there, because you have a long navigation… Or you could just do display flex, and then wrap; like, the flex-wrap wrap. And then when it shrinks down, the line – okay, now my navigation has two lines instead of one. It depends if you have 30 items; maybe it’s ridiculous, because it takes up your whole viewport… But if you had like six links, and then it just wraps on the two lines, maybe that’s a simpler solution. That’s fine. You’re just letting – okay, there’s not enough room, it wraps down. Grid is really good with this…

[28:26] It requires giving up a little bit of control…

Yes.

You’ve got to shift your mindset from “I’m going to tell the computer what to do” to “I’m gonna lay out some boundaries and let it figure out what to do.”

Yes. I think you phrased it much better than I was trying to earlier. I think that’s what with CSS we’re mostly trying to do. And I think realizing that we need to sort of let go of that control, and… Like you said, we’re setting boundaries, rather than setting hard rules. I think that’s a really good way to look at it.

Related to that, and another sort of angle is setting relationships… Right? How this thing relates to that thing. And we have so many more options available to us now with CSS variables, and like being able to do that… But I’m curious if that’s something that you bring up with people; like, how do you kind of talk about not just these boundaries that we’re putting, but like “Okay, how do I make this thing relate to that thing, not just in layout, but maybe in size, or like other aspects you might approach?”

Yeah. I think everything with CSS, so much of it is about relationships, in different ways… Because, you know, just through inheritance, it has one… And then what’s the relationship between the sibling and the parent? What’s the relationship between the different siblings? So I think that’s a very important thing to understand, is just the influence one element can have on another, and how we can change those influences. And that’s definitely where things start hitting that “Okay, it’s not just color blue and background green. We’re getting into something that’s a little bit more complex”, and the rendering engines are amazing at what they can do, but understanding sort of the implications of “If I do a display flex, what’s actually happening?” And I do think at one point that becomes the next step, of rather than just going, “If I do a display flex, these things go next to each other”, to “When I do display flex, what’s really happening here?” And I think at one point, you do need to understand why things are happening.

I have a hard time when I’m doing my videos, because a lot of people will complain that they’re a bit too long, and it’s just because I always like explaining why things are happening, instead of “This is the code you need.” And I get sort of into these little rabbit holes. And even editing them now, I’m always like “Okay, what do we really need to know to understand this?” versus “What’s just me sort of nerding out a little bit?”

But yeah, understanding - if I do display flex, that’s actually changing the inner behavior of the parent, not the outer behavior of it. It’s still a display block. But inside, now it’s flex. All the display properties that were on those inner items don’t really matter anymore, because those are flex items now. What does a flex item mean? How does that work? And then, okay, they’re matching in height; how can I get them to influence each other’s widths? Or how is the parent influencing the width? And how is the size of each one actually being calculated? …and stuff like that. Because it’s surprisingly complex how the browser determines how big something should be by default when we do a display flex on there.

It’s hard too because if somebody’s – if you’re a student, and you have all the time in the world, you feel like you’ve reached that step where you have time to sort of get in that. If you’re working in industry and you’re told to make this layout, and you’re just sort of searching on StackOverflow for a solution or something like that, you don’t necessarily have the time to “Okay, let me set aside three hours to understand the Flexbox algorithm a little bit more.” But if you do have that, I think it’s definitely worth, and you sort of feel like you’re at that stage of needing to understand what’s actually going on - I think it’s worth the time to try and understand it better.

Well, it can be magical, too. I’ve definitely had things where somebody’s struggling with a layout for hours, and they have like 60 lines of CSS trying to do it… And then you come in and you’re like “No… You know what - if you use these five lines of Flexbox, it… Just… Works.”

[31:57] Yeah, I think that’s like – like I was saying earlier on, people like to over-declare a little bit, because they’re just trying to make it work; and when it’s not… “If I put more stuff on here… Okay, that didn’t work., so let me try this, and this, and this, and this.” And so often it’s just like, remove all that and see if you can find a simpler approach… Because usually, it’s a red flag when you see – especially if it’s layout related, if you see lots of code going on, it’s usually a red flag.

Or z-indexes… “Dang it…! Go on top!”

Yeah. [laughs]

Oh, boy…

If you go on CSSstats.com, you can see all the stats for it, so how many colors and properties and all the other things, but it actually shows you all the different Z-indexes that were declared… So sometimes you can see that there’s like an angry developer working on something, because there’s like z-index like 999999… It just goes on and on. They’re like “This is going on top, dang it!” [laughter]

I love it… I love it.

So we’ve talked a little bit about sort of how you sequence and teach folks things over time… Now, as we’ve sort of alluded to earlier, the body of the CSS spec is just massive, and there are hundreds of properties. And many of those, at this point, you can mostly just ignore; either because you don’t need them in very many cases, or because something else has come along that’s better. Are there particular things that come to mind? If I say, “Okay, what’s old? What’s broken? What should somebody just ignore when they’re learning CSS?” Or at least ignore for the first six months.

Yeah, that’s a really good question. I’ve never been asked that before. I do still see people asking what float-based layouts, because I think they find sort of learning paths that involve it… So I would say if you’re following something that has float-based layouts, just skip that section, at the very least… And maybe it’s a red flag that the rest of it’s out of date… Definitely, because Flexbox and grid are actual layout tools; I’d say, if anything mentioned table-based layouts, definitely run away…

Unless you’re doing email.

Unless you’re doing email. I do feel bad for people that still work in email; or not still, but have to work in email, and have to deal with that side of things. I know, there’s tools that make it a lot easier these days…

There are tools that help, but once again, first layer, you don’t have to worry about it. But as you try to understand how it works in email, it’s table-based layouts.

Yeah, it’s a little bit of a mess there. I’ve had some people being like “If I take your course, can I apply this to email layouts, too?” And I’m like “No, don’t use this. Go find a specialist that knows what they’re talking about for that, because this does not apply.”

No, it’s really – it’s a slight divergence there… But if you’ve never touched emails and email layouts, imagine you’re targeting browsers from the ‘90s, maybe… Right? Like, for a wide swath, I think it’s still Microsoft Word underneath, rendering it, for like a lot of the outlook… Like, it’s hideous. And there are tools, if you’re going – I recommend mg ml at this point, I think, if you’re looking at it… But it’s a totally different world, and don’t think that what you’re learning about CSS will work there.

Yeah. Other old things that don’t apply… That’s a really good question. I think it’s more a little bit just try and – anytime you’re just having to layer stuff on top of other solutions on top of other things, that’s the biggest thing of like don’t do that. Don’t over-rely on media queries. As much as I’m into intrinsic design, media queries are still a requirement these days. You need them, just not for everything. You shouldn’t have like 37 breakpoints, or something… But it’s normal to have media queries. Just try not to rely on them too much. See if you can find ways that work just intrinsically, and that you don’t have to sort of fight the browser with to get things exactly the same.

And actually, brief diversion on that… Let’s highlight a few of the ways that people can do that. So you’ve mentioned max width as one, and heights… I think there’s a lot of flex and grid properties as well, but maybe we can just sort of lay out a few of the options available to folks for responsiveness without media queries.

Yeah, so definitely flex with flex wrap; that just lets things – if you have a min width on them or whatever, give them a flex grow, so they’ll fill up the space, but if they hit that min width, they’ll sort of start wrapping down, they can fill the space back up again… Using grid, my favorite thing - or one of my favorite things with grid is… The syntax of it is a little bit verbose and kind of weird-looking, so when you first see it, it’s a bit strange… But you have the autofit, so you’re doing – like, it’s a mix of a whole bunch of things that are unique to grid, which is why it’s a little strange-looking… But it’s your grid template columns, and then it’s a repeat function, and in the repeat function you’re using the autofit keyword, and then you have to use a min/max function… So it definitely looks a little strange. But once you have that, you just change your minimum size, basically, and it works. So it’s not like you’re coming up with different solutions every time. If you’ve never tried it, just look that up, like the autofit with grid, and you’ll find the one line of code you basically need to get it to work… And it’s super-great at building just sort of like this tiled layout that will – you know, it’s five columns, and four, then three, then two, then it just stacks, and… It works. It’s fantastic. Yeah, I think those are like the two main things, of just letting the layout adapt on its own, and letting the browser figure out what works best based on the sort of limits that you’re placing on it.

[40:03] Yeah. I’ve used the clamp function occasionally as well.

Yes. Clamp with typography… And even doing it with like padding and margins can be super-useful. So clamp lets you set like a minimum and maximum value, and then you can use a viewport unit in the middle to adjust… So it’s sort of like “Okay, we’re gonna grow or shrink with the browser, but we’re setting a minimum and maximum of how much you can actually grow.” The natural instinct for me there is always just for typography, so you don’t need to redefine stuff…

Yeah.

And there’s really good tools. My favorite one is Utopia.fyi. It’s like a fluid type generator that works super-well. And even if you are going to use media queries – because as much as the fluid type is amazing, sometimes it just doesn’t work with your design system, or the site that you need to build, or your designer’s giving you more specific things…

Or you might need something different in mobile versus desktop, and like you clamp in each one, but you still need to swap…

Yeah.

Totally.

But even there, just using like custom properties, and my font sizes, whatever font - you name it, you give it a value, but the nice thing with custom properties, which are CSS variables, basically, you can redefine them within media queries. So you could redefine your whole font size thing with one breakpoint; everything just changes, you don’t have to go looking through your elements to change them on a per-element basis, or whatever it is… And that has the advantage over preprocessors, like SASS, or LESS, and stuff like that, because they can’t redefine within a media query; you have to sort of do it the backwards way, which is more work…

And even like – there’s min and max, we have clamp, which is setting a maximum and minimum, we also have the min and max functions, so you can provide it two, or you can provide a ten values if you want, but it will always take whichever value is the biggest, or a min would take whatever value is the smallest. Sometimes those don’t have the most obvious use case, but every now and then you just run into like the perfect thing for it.

Yeah. Anyway, I diverged just a little bit on this… Were there other sort of old and busted things you were going to highlight for folks, that they can ignore?

Yeah… There probably are, that I can’t think of off the top of my head. I’m trying to think back into like old things that I used to teach, and other stuff… But I can’t think of anything that’s like this glaring thing that’s jumping out at me right now. If something comes to mind, I’ll let you know. Or if you have anything… You might have lined up already, but I can’t think of much.

I mean, float-based layouts is definitely up there… What else did we used to do a lot…? I mean, I don’t think there’s folks still doing like image-based corners, and other stuff like that out there…

Yeah… Actually, I just put out a video maybe two, three weeks ago, that was looking at like 1997 versus now… I made a button in Photoshop and then sliced it up, and I was trying to remember how to actually do it, and I’m just like “I’m not –” Like, I recorded myself doing it, I was showing in theory how it would work, and it was completely broken, and I’m just like “Let’s just throw a border radius on there. Thank goodness we have this.”

Actually, one thing that I will say that I see a lot still is questions about prefixes, which is sort of the – when CSS 3 happened, and it was amazing, because we finally could do border radius, and box shadows, and all these amazing, cool things that we could never do before, but everything basically was prefixed, because every browser didn’t implement it properly, or it was their own implementation, and it didn’t quite follow the spec, so just to be safe, they prefixed it to eventually plan to drop the prefix… And I would say these days, first, you probably want to use a tool like Autoprefixer within your build and all of that anyway, so you’re not thinking about it too much… But most things don’t need to be prefixed anymore, other than like a few weird properties, that if ever you find like you need to solve – like, the one that you can think of is line clamp, because you can sort of set a maximum number of lines… And sadly, it is actually in the spec now, but the browsers decided to do it before it was part of the spec. And I think it was one browser did, and then everybody got on it, because it’s useful… And then finally, it got added to the spec, but everybody just has this – it’s all WebKit-prefixed. So it’s -webit-line-clamp and there’s a few other weird things you have to do to actually get it to work… But yeah, I think prefixes are not completely dead, but very much something…

…on their way out.

Yeah.

Thank goodness. Nice. Well, what do you think of/do you recommend CSS framework? …both when somebody’s learning, or just for general use?

[44:15] So being someone who likes to teach CSS and understand CSS, I’m a big fan of just writing CSS… So I am biased in my answer, and I do want to say that, because definitely, I think that for me the best thing to do is understand CSS before using any framework, just because 100% you’re going to need to do something that isn’t really explicitly outlined in the documentation for whatever framework you’re using, and you won’t know how to do it, or you won’t know how to fix that. But if you understand how CSS works, you’ll potentially be able to come up with a relatively easy solution, hopefully, and maybe a hacky one in the worst-case scenario.

That said, I did learn a lot back in the day using Bootstrap… But I think the reason I learned a lot from it was because I wasn’t just like “Okay, it worked, and I can move on” and “I made my quick prototype, let’s go.” It was more like, I was looking at how they were naming their classes, how they were organizing things… I was trying to understand why they were doing things in certain ways, and then that sort of gave me ideas on how I could author my own CSS, and sort of steal ideas from it without relying on their sort of very structured, rigid way of working, and I could sort of steal their ideas, rather than just using their own code.

So I don’t want to say don’t ever use one if you’re learning. I also think it depends on what your goals are. If you’re in the middle of learning some – I don’t know, you’re learning JavaScript, or doing something else and you don’t really want to be diving into how this works in CSS right now, you just need something to throw together to work, so you can practice this other thing - that’s fine. You know, use the tool to speed that up. I don’t think there’s any harm in that. But I do think the better you understand CSS, the better you can use any framework. Tailwind now is the classic example, because of how much it’s exploded… But Tailwind is sort of just a different way to author CSS, in a way… You know, you’re doing a lot of in-line styling almost, and if you don’t understand CSS…

What that’s doing…

…I don’t really know how you could use Tailwind, to be honest. Maybe if you’re using the UI a little bit, like the Tailwind UI, just because they sort of have some pre-baked stuff for you. But I think the better that you understand – it’s the same with JavaScript. If you understand JavaScript, you can sort of jump between frameworks a little bit easier, have a better time with it… If you just learn React from the beginning, you won’t even know what is JavaScript, and what part is React-specific… So for anything like that, I think understanding and having a decent understanding of the base language is always a good thing.

Yeah, that makes sense. Well, other than your YouTube channel - and we’ve talked a little bit about sort of layout resources - are there other resources that you would recommend to folks who are interested in learning CSS? Where should they go? What should they dig into? I mean, should they just go to KevinPowell.co and done, that’s it?

If you like video-based content, which I know some people really like, I do think I have a lot, and I cover a lot of material on my YouTube channel, so it’s a good place to start. My written content is very lacking at this point. I started writing and I never really kept up with it. So if you’re more into written content, there’s a lot – I mean, between CSS-Tricks, Smashing Magazine, Josh Comeau has amazing content out there… So his blog posts are always really high-quality. There’s Stephanie Eckles, who has moderncss.dev, I believe it is, as well as SmolCSS. So moderncss.dev is more like let’s dive into like topics, and it’s a bit more in-depth on how we can accomplish certain things using modern CSS techniques, things like clamp, min/max functions, the grid auto-flow, and stuff like that… And then SmolCSS.dev (I think), and that’s nice, because it’s just basically like “Here’s a pattern that you can try and use, and here’s the code for it.” So it’s just like little snippets that you can sort of steal. So that could be really useful as well.

[48:01] I do have courses if people don’t mind investing into things like that… But no, there’s so much content that’s out there these days that I guess it depends what you’re trying to learn, where you’re trying to get it from, and what the goals are, and everything there… But yeah.

Awesome. Well, I think I caught all of those, so I’m going to include links…

I can send them over to you after too, to make sure that – if there’s any that I forgot, I’ll send them over as well.

Awesome. Well, this has been great. Is there anything else that you’d like to share with folks, or that you think people should take away from this conversation?

I think for me, the big thing – my main goal is always to try and help people be less frustrated with CSS. I love it, I really enjoy writing CSS, and I know a lot of people get frustrated with it… So if I can help people actually love it, if they’re less frustrated by it, I’m happy. And I really think the best way to get there often is just like “What’s the simplest way to like achieve this thing I’m trying to do?” If you feel like there’s no simple way of doing it, maybe it just means like “Okay, let me hit pause for a second and look this up a little bit.” Because most things these days don’t have overly-complicated solutions, unless you’re getting into really the weeds of stuff… And obviously, there’s some weird stuff that goes on, and there’s some hacky behaviors that can occasionally pop up.

But yeah, I think that, in general, taking like a really simple approach that just tries to be like as frictionless as possible is always the right way to go about it. And hopefully, if you are struggling with CSS and stuff like that, hopefully my content can help sort of get into that right mental model… Because it’s a completely different one than anything else that I can think of. So just being able to think in the right way, and get into the right mindset for writing is needed… And it can take a while to sort of come around to how it works, but once you get there, it can be an enjoyable experience, and it can be a lot of fun.

Yeah, I think that’s really key. It’s like, don’t expect CSS to behave like the programming languages you’ve been writing in other ways. If you do, you will be frustrated. And many people are. Come into it with the expectation that this is something new and different. It’s tackling a much different problem domain. And you know, we highlighted a little bit the vast variety of displays that someone might be using this on. But once you kind of wrap your head around that mental model, it is super-fun.

Yeah. I know for me, especially because it is visual; like, you see your results right away. I guess that can be frustrating too when the result isn’t what you want it to be… But there’s like that instant gratification a little bit with it, that I get more with CSS than I do with when I’m writing other things. So I think it’s really enjoyable and a lot of fun, and I think as long as you can get into the right mental model for it, I think anybody can enjoy it.

Awesome. Well, thank you so much, Kevin, for spending the time today. Those of you listening, thank you for listening. If you want to hear live, you want to chime in… We didn’t get anybody asking questions live, so if you have questions, you’re gonna have to look Kevin up later. But you can, in future episodes, ask them live; just join us on Slack. You can watch live; we record 10 o’clock Pacific on Thursdays, and… Yeah, so this is JS Party. Thank you, Kevin…

Thank you so much for having me.

…and I am Kball, signing out.