This week I got to speak with Kevin Powell! Kevin has had tremendous success on YouTube educating people about CSS ‘n’ friends. But like so many good content creators, he’ll meet with where you are at and what you need — his personal site has written articles, resources, courses, and a newsletter. Kevin is a joy to talk to. We took the opportunity to nerd out on a variety of mostly CSS-related things.
Time Jumps
Transcript
[Radio channel adjustment]
Announcer: Today, on CodePen Radio.
Chris Coyier: What's up, everybody?! CodePen Radio 374. I've got a special guest, Kevin Powell. How ya doin', Kevin?
Kevin Powell: Yeah, I'm doing great. Thanks a lot for having me.
Chris: Yeah. My pleasure, really. I'm sure most of you know Kevin. Kevin is a CSS evangelist; I see it says. Heck yeah, you are. You teach people through all kinds of mediums. I particularly think of YouTube because you're basically super good at YouTube. [Laughter]
Kevin: [Laughter]
Chris: Is that true? Is that the main thing? Is that your main focus these days? Are you making a living doing it?
Kevin: Definitely sort of how I guess I got where we are now is by starting up over there. I still don't know how it's happened, but it's pretty cool I guess. [Laughter]
Chris: It's extremely cool because there are just generic influencers out there that maybe have millions of subscribers on YouTube, and that's fine or whatever. But they're so generic that it's like, how do you--? I don't know. I feel like there's an advantage to the niche, no matter what it is.
Your niche is a niche of a niche, so I think there's almost more value in it because people know what to expect from you. Advertisers know who your audience is, so they can hit you that way.
I don't know if that's your top priority. I doubt it. You clearly have a passion for the Web and for those things, so I'm sure it's not like financially driven or anything, necessarily. But it's probably pretty cool that you can make a living doing it, right?
Kevin: It's still mind-boggling that I can. It's kind of wild, but I'm super happy that I can because, like you said, it's something I'm super just excited about. The fact that I can help people and have the reach I do now, it was completely by accident that this happened. I didn't start the channel with any ambitions of anything ever happening.
After a year of making videos, it was basically that. Nothing had happened, and you get 50 views on a video, and you're pretty stoked.
Chris: Yeah!
Kevin: Oh, I got 100 on that one. Yeah!
Looking back to that to where things are now, it's kind of insane, really.
Chris: Mm-hmm. I mean I can relate to that in a big way because CSS-Tricks as the blog, and the same vibe. If an article got a couple of comments or a noticeable number of views, you're like, "Hell yeah!" [Laughter] You know? Which was enough in those early days. Then it kind of slowly grows up.
Maybe it wasn't so slowly for you, though. After that first year, was there a noticeable pickup?
Kevin: It's kind of funny. I think a lot of people assume YouTube is sort of like this hockey stick growth where once growth -- whatever. This exponential explosion.
Chris: There's a tipping point or whatever?
Kevin: Yeah. For me, it hasn't been that. It's sort of been like in steps almost. I'll just be rolling along, and then all of a sudden, it's like, oh, this one video does well, and it sort of hits, like, oh, I've just reached this new group or this new audience. Then it just rolls along there.
Then it's like, oh, this one video did super well. Then it goes from there again.
Chris: Ah...
Kevin: Yeah.
Chris: Nice. So, it seems to be linked to a killer video, which is probably unpredictable too, right? It's not like, "Oh, that one I did with the fire ship dude was the one," or whatever.
Kevin: Yeah. My last one that actually exploded - because one thing I'm trying to do more and more now is to talk about accessibility as much as possible. I always see that as the one that -- for me, often, it shouldn't be taught as like its own subject. It should just be part of the conversation.
Chris: Hmm.
Kevin: But then I made a video talking about a skip to main link.
Chris: Right.
Kevin: It had, granted, a very clickbait-y title, and that one was one of the ones that definitely exploded because of the title. But yeah.
Chris: Oh, that's awesome! I'm so glad it wasn't the opposite, like, "Every time I talk about accessibility, I lose 50 followers," or something. Not the case, people!
Kevin: Yeah. Yeah. [Laughter]
Chris: It helped Kevin blow up. Yeah, that's great. That's a tricky one, isn't it? Just that dumb little thing, like a link for screen readers to skip past all the cruft at the top of your website. But it's one of those things that there's enough detail that it's tricky to get right.
Kevin: Mm-hmm.
Chris: Yeah, so you have this medium at your fingertips that's just tremendous. It actually warms my little heart a little bit to know that so many people learn from you who have your head screwed on straight about it. But if you actually sit there and watch the video, which people clearly do (on your channel), that you're - I don't know. It's like seeping into your brain in the best possible way.
You're watching somebody do it. You're seeing the results of it, or whatever. Most of the content I've ever produced is written. It's great because maybe the analytics numbers are high because it's like any hit, anybody that even happens to skoosh by the blog post gets recorded as a thing.
But a few is much more engagement than a few of a blog post, I think. To see those numbers so high, all that information is just seeping out there into a new generation of people is pretty cool.
Kevin: Yeah, it is an interesting topic there, though, just on the written versus video format, I think, for tutorials and everything.
Chris: Mm-hmm.
Kevin: It's a hard one, I think, in the comparison, in a way. For a quick understanding of something, I'll go look for written content first because you see it there on the screen. You can copy and paste it. [Laughter] You know it's one of those things. It's definitely a bit different, but I think it's that idea, like you said. Instead of being more of, like, here are the different things, it's more about, here is actually how -- let's take that and then use it and show how it can be put in, play around with, and things like that.
Chris: Right. Yeah, you can't put them on -- one is not better than the other necessarily.
Kevin: No.
Chris: It's just a different way you engage in it. I too find myself doing both. I'm on my own little personal journey here to learn Go, a language that we use here at CodePen quite a bit. I think it's really fun, and I just happen to be in a place in life where it's like, "Oh, I can kind of switch my main attention or something, because I kind of recently had the sale of CSS-Tricks, too, so I'm not producing as much CSS related content or being responsible for that necessarily. Yeah, maybe I'll dip my toes in something else.
I have to go back to this very beginner place of being like, "How do you do a variable?" You know?
Kevin: Yeah. [Laughter]
Chris: What if I want to merge these two objects? How do I possibly do that?
To some degree, in the moment, if I'm writing something that is production, I'll just do it. I'll end up landing on Stack Overflow - and stuff - like anybody else does. But then there are these other times. Perhaps I'm at lunch. Perhaps I'm even laying in bed at night (because I'm such a nerd that it's actually calming for me to watch tech videos) I'll watch videos about Go.
Kevin: [Laughter]
Chris: I don't even care what they're about, necessarily.
Kevin: [Laughter]
Chris: Just like, "Give it to me." In that, I think it almost sinks in a little harder when I'm watching those videos because I'm seeing someone (at least usually) with some passion about it.
For you, CSS is a big target. I think you're known, certainly, as a CSS dude, but CSS doesn't exist in a vacuum, right? It's always at least paired with HTML. Is that kind of the plan going forward? Are you going to branch out?
[Laughter]
Chris: It seems like a bumper crop for CSS this year. Maybe you just stick with that.
Kevin: I mean, yeah. I have been saying that to people. The timing of things as far as when I made the channel, if I made this five years ago, maybe I would have run out of content at one point. [Laughter]
Chris: [Laughter] Maybe.
Kevin: You know you can obviously -- let's build this and build that and build this other thing. Right now, I'm almost having to hold back on topics that I want to do just because I did a video on Subgrid when Firefox got support for it thinking that it would be relevant soon. Then, two years later, finally, it's gaining relevance a little bit.
Chris: Yeah.
Kevin: I'm holding off on some of the content just because I'm like, let's wait until it looks like it's about to ship or it's hitting Nightly, Canary, and all of that, at least.
Chris: I see. I see. Will your comments be full of, like, "I can't use this"?
Kevin: Yes.
Chris: Or are those days over?
Kevin: I still get, "What about Internet Explorer?" if I talk about Grid. I'm just like, "Oh...."
Chris: Really?
Kevin: Yeah.
Chris: You just can't. It just can't be... People, you need to reevaluate your mind a little bit here!
Kevin: [Laughter] Yeah. Like you were saying though, it is a bit of a good time to be CSS-focused just with where CSS is going and the maturity it's going through right now is incredible and super exciting.
Chris: Heck yeah.
Kevin: Yeah, and for me, I made the channel as a hobby thing. Really, that's what I enjoy the most is sort of that side of thing. As much as possible, I want to keep focusing on that. But I do think, because I have a larger audience now, that it's important. That's why I'm trying to integrate more accessibility, as I'm learning more about it myself.
Also, I want to get into -- I'm looking at some. I've touched a bit on static site generation with 11ty and I'm looking at Astro, which is really cool and stuff.
Chris: Mm-hmm.
Kevin: Because you always get questions about other languages and everything else, whether it's JavaScript, but a lot of React and other stuff.
Chris: Uh-huh.
Kevin: I sort of like the idea. If I'm just doing regular CSS, if you're writing CSS and JS, you can still take that, or if you're writing Sass, you can still take what I'm doing and put it in there, or whatever.
Chris: Right.
Kevin: By staying a little bit more vanilla, I think there's upside to it. But at the same time, I do see if I am going to branch off and go more into, like, let's make something, I wouldn't necessarily go to React. If it's going to be, "Let's make a portfolio page," because I don't think you really need that necessarily, let's use 11ty and something that's going to make you have a super-fast and performant site. We don't need all these bells and whistles to have a blog or a general, you know, personal project or something, necessarily.
Chris: Right.
Kevin: That's sort of ideas, but I've still got a lot to talk about with CSS, so I'm happy just sticking with that, too.
Chris: Sure. I mean that brings up a good point, though, that you could. It's almost like free content (in a weird way) if you leaned into -- because CSS does exist in other ecosystems. I would think that--
I don't know. This feels like a gamble to say. Perhaps most people that write CSS are writing it in some other unique little ecosystem that either they devised themselves or is part of where they work.
Kevin: Mm-hmm.
Chris: It's probably not just raw CSS. [Laughter] Your bet is, I'm teaching you this in vanilla CSS because it will travel where you are.
Kevin: Yeah, exactly. Even some people are like, "Why are you just doing regular HTML and CSS?" I'm like, well, if I do it with React to build out this one lesson I'm doing, everyone who is not using React, they're not going to look at it. Even if they could learn stuff from it, they're just like, "Oh, that's React. I'm out."
Chris: Irrelevant to me. Yeah.
Kevin: Yeah, so I think talking primarily about CSS, like you said off the top, is a niche enough subject. I don't really necessarily want to niche down more than that, too much at least.
Chris: Yeah. That was kind of the gamble I tried to make at CSS-Tricks, too. I tried to not involve a framework if I could possibly avoid it. Even when there was a guest author, we kind of tried to rip that stuff out a lot because a lot of times what you get is an assumption of Sass - or something.
There was a long period where Sass was so big that you'd just roll with that. There's still some of that content on CSS-Tricks, but I tried to push away from it where we could. Yeah. Yeah.
Now I see it'll never go away. I see it on other blogs sometimes, too, where they put a bit of HTML. I'm like, "That's actually JSX."
Kevin: [Laughter]
Chris: Just to be clear. [Laughter] Not really HTML. But I don't mind it. I guess that's what I meant by free content. If you're really strapped for stuff, you could take an existing lesson and just be like, "Okay, here's how that applies to Astro," or whatever.
Kevin: Yep.
Chris: It can be interesting. You know? It can be like - I don't know - they support CSS Modules. That's pretty weird. So, here's how those connect.
Kevin: Mm-hmm.
Chris: Yeah, I think you're smart. You're too big to niche out now any further.
[Laughter]
Chris: There's stuff like I'll just connect it to your world and mine a little bit, the best I can. There was a Pen I saw just the other day that really leaned into :has. It's like brand new stuff dropping in. As I speak, it's Safari stable and Chrome flagged.
Kevin: Mm-hmm.
Chris: Pretty cool though, right? What?! We were pretty sure that was just never going to happen. In fact, back when I followed it as closely as I could, the refrain was like, "That's just not how browsers work, so stop asking because you're not going to get this," the mythical parent selector.
Then all of a sudden, we just do. [Laughter] I don't know what enabled us to just have it all of a sudden, but we do now.
Kevin: Yeah. [Laughter]
Chris: Maybe we'll get it in Firefox. That's a whole other conversation of how quickly and possible it is for them to keep up, and the conversation about how much people care changes too.
But let's say that. Do you have a video on :has? How does the Kevin Powell brain work when you see a feature like that? Is it time for the video or not?
Kevin: Yeah. I haven't done one on it. I have used it in a video just because I was trying to solve a problem and I couldn't figure out how to do it. I'm like, "You know what? I'm opening up Canary, and I'm doing it, and we're just going to look at it this way because it's going to be in CSS soon, and here's how cool it is."
Then of course, on that, there were like 10 comments within 15 minutes saying, "Oh, you could have just done this instead, and it would have been fine without the :has."
Chris: Oh...
Kevin: I was like, "Oh, my goodness! Why didn't I think of that?" But yeah, definitely, I sort of play around when I see these things.
I did do a video on :is and :where." Well, they gained support so quickly, though. It seems like certain things just like, "Oh, here's this new thing we have," and a week later - not quite, but pretty quickly - everyone just supports it.
Chris: Yeah.
Kevin: You're just like, "Wow! That was cool. Okay.
Chris: Whoa! Yeah, it's this new era of evergreen browsers - even though I know that's a nuanced topic in itself. But yeah, for the stable branch--
Kevin: Yeah.
Chris: Things do seem to fall pretty quick, but there's plenty of stuff that's not going to be like that.
Kevin: Oh, yeah.
Chris: Container queries aren't going to be like that. Container units aren't going to be like that.
Kevin: That was one of my worries a little bit when all these new -- you could just see this list of all the new things that are coming.
Chris: Yeah.
Kevin: I'm just like, the last thing we want, especially because Safari (at least in the past) has tended to do its own things. Safari is already supporting :has, but it has all the new color stuff.
Chris: Oh, sure.
Kevin: That stuff is really cool, but is Chrome going to go container queries first? Is Firefox going to keep pushing on the next level of Grid or whatever?
You have all this cool stuff going. But all the browsers are sort of focused on different areas, it doesn't help us at all because we still can't use any of it realistically.
Chris: Hmm.
Kevin: It does look like that might not be such an issue. I'm hoping it's not. Yeah, it's definitely.
Chris: Yeah.
Kevin: It's a little bit frustrating to see progress made in some areas and not others, but I think, for anyone who has--
I've been reading CSS-Tricks since way before I even started making content and, back then, new stuff just came so slowly.
Chris: So... yeah.
Kevin: Now to be looking at it and going, "Oh, maybe we have to wait a little while for this," or maybe we're a bit spoiled right now." [Laughter]
Chris: Yeah. Perhaps that wait a little while tends to be like a year-ish, maybe.
Kevin: Yeah.
Chris: You know? Instead of - I don't know - five. [Laughter]
Kevin: [Laughter]
Chris: Whatever it was.
Kevin: Yeah.
Chris: And it changes. I wonder, JavaScript people. Which I'm not trying to put them in a bucket necessarily, but you know. People responsible for setting up a JavaScript-like build process, for example, JavaScript has tended to move faster. It's the fastest moving of the languages we deal with. Babel came along, and it Polyfilled a ton of stuff.
Kevin: Mm-hmm.
Chris: Language-wise. Then Polyfills have always been a thing in JavaScript, so when you're talking browser features rather than the language of JavaScript. You can Polyfill those things, too. That culture set in a little thick, I think. Once spread became a thing, you're like, "Oh, yeah. We just use that now," because the assumption is we'll either Polyfill it or something.
I don't think that clicked as heavily in CSS, but I wonder if it's going to start to. I would think you could even influence that if you wanted to. Just saying. But there's a Post-CSS thing that seems to get pretty popular. What is it? Preset-env, which is named after the Babel configuration preset-env, which is kind of saying it trails the most popular realistic level of browser usage, and it has stuff in there like these color syntaxes.
Kevin: Mm-hmm.
Chris: Like nesting. It's a subset. It's tricky what you can and can't Polyfill in CSS, but I wonder if that's coming, that idea of, like, everybody just uses that and some basic levels of Polyfills. And then we kind of stop thinking so hard about what's in what browsers and what isn't because the Polyfill culture is so prevalent.
Kevin: Yeah. Yeah. I mean Post-CSS and having the preset-env is awesome that you can not worry. I remember when it was--
I think, back then, it had a different name at one point.
Chris: Yeah, it did. Hmm... I forget.
Kevin: That was even with -- obviously, there was the auto-prefixer. But even with custom properties. Support wasn't great, and it would just be like, "Oh, well, you can use it, and it's going to (before your custom property use) take that color and automatically just put it however you're using it as like a backup and stuff."
Chris: Yeah.
Kevin: The fact that you didn't have to worry about it just for that was super cool. Now, as you said, you have nesting.
I've been using it, so I can use the custom property -- yeah, the media query custom properties.
Chris: Right. Yeah because you can't make a media query. You think you could because it's just a variable, right? But it's like, nope, you can't, actually. This allows you to be like, "Okay. My small, I can put that in one place in a custom property." Yeah.
Yeah, what an easy Polyfill. I could have wrote that one. Gees. [Laughter]
Kevin: [Laughter] Yeah.
Chris: But yeah, I don't think we're quite there yet. I don't see usage of this preset-env thing being so strong that you just see articles with native nesting in it - or something. You just don't see that quite enough yet.
Kevin: No, we're not there yet. That's for sure.
Chris: Then just because you're Polyfilling with preset-env doesn't mean your container queries will work. That's a totally different kind of Polyfilling.
Kevin: Mm-hmm.
Chris: I think that separation is weird. You know?
Kevin: Yeah.
Chris: Anyway, I don't know where I was taking that. It's just so interesting. Even Kevin has not dropped a :has video yet.
Kevin: Yeah.
Chris: That says something.
Kevin: It's planned, but it's not there yet.
Chris: I was seeing some Pens related to it. Then I saw the Pen break, so there's support and not support. I don't mean to scare anybody, but with selectors like there, there's almost a sub-chart of support. What exactly can you put in a :has that actually works?
Kevin: Mm-hmm.
Chris: That actually has some, like, will ten nested selectors in :has work? Can you put a :has in a :has? Can you put a :not in a :has? Can you put :not outside of a :has - and those types of things? It's not super guaranteed that that green checkmark means that every permutation of that works, sadly.
Kevin: I remember running into that even with -- it might have been the :not pseudo function - or whatever we call them - where I think it's Safari supported complex selectors inside of that, but other browsers weren't supporting it - or something. You could come in with direct child with the plus. You could do whatever you wanted, basically, and Safari was fine with it and the other browsers were just like, "Nope. It's a single selector." I think you could do a little bit, but there was a limitation on it anyway.
Chris: Yeah.
Kevin: Yeah, it's frustrating when that happens because you assume it's just working, and then you're like, "Wait, what?" Then you're looking for documentation and, on that level, it's hard to find the nuance that comes into it sometimes.
Chris: Exactly right, and that's the kind of thing where a video is great to explain it, but there actually needs to be a faster way to find that information.
Kevin: Yeah.
Chris: Thanks, MDN, or whatever.
Kevin: Yeah.
Chris: Usually. [Laughter] I could see the frustration going both ways, too, because the browser is like, "We had to do that!" You know? "Do you want this or not?!"
Kevin: Yeah.
Chris: "We had to ship it!" Yeah. [Laughter] "We had to pick some kind of limits here," or whatever. Pretty, pretty cool, too.
This doesn't have to be about CodePen so much, but there is a little crossover. Sometimes we see videos. You do it once in a while; use CodePen as the IDE in the video because, hey, it just tends to work out. There are definitely some casual YouTubers that I'll just be like, "Oh, they're using CodePen. Cool." You know? It tends to work out, right? It's not like we designed the product for that, but just a little bit of serendipity there, huh?
Kevin: For me, it's nice because even if I don't end up doing it in CodePen, that's usually where everything starts. [Laughter] Just pen.new and then I have an idea. Let's do a rough draft. Then if it's something a bit more involved, I might go to VS Code just because tell me they like it (for whatever reason). But for simple things, it's so much easier.
Even if I'm watching something, if it's a simple example and, for whatever reason, I do want to see the code, I don't want a link to a GitHub repo. Then I have to fork it and do whatever.
Chris: Mm-hmm.
Kevin: If I could just click it and it's there and it's nice and simple, for me, I think that makes a lot of sense.
Chris: Right.
Kevin: Yeah, and then it's also just the setup of it works super well for just focusing on whatever language and the different things. Everything I need is there for what I'm doing. Then I don't have to muck around too much with my font sizes in VS Code, and I can leave that how I want to. [Laughter]
Chris: Right. Right. Right.
Kevin: Instead of having to remember.
Chris: That's how my life is too. Of course, I use VS Code. It's just a nice editor that's kind of set up for more complex situations, complete file systems, and having a terminal - yadda-yadda. Yeah, pretty cool. Yeah, it's interesting to know what your flow is, just for our purposes, too, because CodePen is certainly going to evolve, change, and hopefully support more workflows and stuff, but not ruin for anybody too. You know? It's one of those. [Laughter]
We face some of the same problems that a browser might. You can't break anything.
Kevin: Yeah, I can imagine.
Chris: I want to ship stuff but ship the minimal amount where it's not going to ruin it. You know? It doesn't hurt that we get to be in Kevin Powell videos. You know?
[Laughter]
Chris: Yeah. Sweet! So, what else is going on? We didn't cover--
It's not like my intention was to go through the list of CSS stuff, but I did plan to ask you what's the next year look like. What are you excited about watching technology-wise and content-wise?
Kevin: Yeah.
Chris: Do you got a sick preview of anything?
Kevin: Definitely -- actually, right now, my current planning is a bit of a disaster because I've been working on a new course for four months longer than what is planned.
Chris: Nice!
Kevin: It should have launched four months ago and it's still not ready. [Laughter]
Chris: Hmm...
Kevin: That sort of mucked up everything, and it's a lot of week-by-week content at the moment, which I hate doing, but c'est la vie.
Yeah, a lot of the future content is me keeping an eye on what's happening with a lot of the things I'm most excited about, whether it's :has, the color stuff, container queries, Subgrid, all these things that I'm waiting for them just to hit that next step, you know, one more browser grabbing a hold of it, and then definitely, once I see that sort of, okay, it's a realistic timeframe, I can say that it's in these two browsers and in the pipeline for a third, then here come some videos on that for sure.
Chris:. Yeah, that would make sense, too. I think it might hurt the videos, too, a little bit if every other sentence, you're talking about browser support and stuff because then there'll come a moment where that matters less. Then the course will feel really dated.
Kevin: That's one thing I was always jealous of on CSS-Tricks and you had those kind of use tables. I think that was live, right? It wasn't just a screenshot.
Chris: It was live.
Kevin: Yeah, so like, for me, I just have--
Chris: Yeah, which I had to switch to on purpose at one point because I was like, "I can't keep these up to date. That's crazy."
Kevin: Yeah, so in my videos, if I put a screenshot saying, "This is the current support and, hopefully, it's better soon," and I could tell people, "Check the current support in the link below," but they won't, and then they'll just comment and complain - or whatever it is. So, that's one thing that I wish--
Chris: Yeah, you can't put an iframe in a video or something.
Kevin: Yeah. [Laughter]
Chris: That's too bad. I wonder if that's some kind of future technology. So, is it the Beyond CSS course that's the one that's about to launch here?
Kevin: Yeah, exactly.
Chris: Yeah. Nice.
Kevin: I think we were talking about vanilla CSS. It's one where I'm not doing vanilla CSS. I'm going more into my workflow beyond that because I have a course.
Chris: Right.
Kevin: I have a course that's more about, like, let's understand CSS and how CSS works because I think the biggest issue people generally run into is the whole, like, you start learning CSS and its color blue, background red. It's a declarative language. It's super simple. Then when it doesn't work exactly how you think it should, you're just frustrated and it feels like a broken language.
Chris: There'll be some debugging stuff in here?
Kevin: Yeah, my older course, previous one, was more about that. Let's understand the fundamentals of how CSS actually works, so you're not frustrated with it. You understand.
Chris: Yeah.
Kevin: Some of it was more like what's formatting context and stacking context and stuff like that, debugging, and that side of things. Then this one is more about let's talk about scalable solutions now and go into -- so, I am using Sass. It's my workflow that I've had for a while, so I'm going into that.
Chris: Yeah.
Kevin: Generating lots. Hopefully, it's something that -- well, it goes deep into Sass, but I think it's something I think you could even use Tailwind for if you're just generating utility classes and stuff like that. I don't go full-on 100%, but I like having utility classes for certain things.
Chris: Right.
Kevin: Let's generate all that. Let's build on top of that and get into project architecture, getting into theming, design systems, and that side of things.
Chris: Yeah, probably a little bit that matches what people actually do. [Laughter]
Kevin: Exactly. Yeah. Speaking of that, that's the idea there. I was going to do the end, the final module of the course, I was originally going to use 11ty and hook it up with a headless CMS. But I'm actually probably not going to do that because you do get a lot of questions about CSS and JS and ideas around that. I'm like, if I'm going that far, I might as well use something where we could go that next step.
Chris: Yeah.
Kevin: There are lots of different options so, as I said, I'm way behind on the course, so I haven't figured out which one I'm going to do yet but we'll get into that world as well and how all of these ideas can come together onto managing larger scale projects and dealing with all the issues that can come up with them.
Chris: Nice. Yeah. That'll be great, too. Yeah, you've got to find your niche within the niche because there are certain courses that kind of already exist. Like if you're going to do a Grid-specific course or something, well, now you're competing against the other Grid-specific courses out there.
Kevin: [Laughter]
Chris: I know that Josh Comeau has a CSS course that's really popping right now, too.
Kevin: Yes.
Chris: I'm sure that's on your mind of trying to not do the exact same thing.
Kevin: Yes. I got his course because I was just curious, but it's super good.
Chris: Yeah.
[Laughter]
Kevin: I'm like, "Damn. He knocked this one out of the park. I can see why it's so popular." Yeah.
Chris: Yeah, and you brought up the Tailwind thing. That's so tricky, right? I feel like you can dip your toes in some CSS stuff, but not that. If you're going to do that, you're either using it or you're not - in a way. That's tricky, so I don't even know what. I'm sure you can't avoid addressing it here and there.
Kevin: [Laughter]
Chris: It's like a fork in the road for styling websites.
Kevin: Yeah, I do get sometimes when I go into stuff on CSS, there are always some comments of, like, "Oh, I could have just done that with Tailwind instead of all of this." I'm like, "Okay, you could have, but then why are you here?" I guess, in a way. [Laughter]
Chris: Right.
Kevin: It was quite clearly this is how you do this, how it works, and I think the way I see it, for me anyway, with most of my content, it's a lot about -- it's not, let's use these properties to make this. It's like, let's understand what we're doing.
Chris: Mm-hmm.
Kevin: I think it's even the idea -- it was funny for me. I learned a lot about CSS back in the day when I wasn't great, and I was using Bootstrap a lot, just seeing and figuring out how Bootstrap is doing what they were doing rather than just using it. Then their class naming, how they were organizing their structure, because they were building it on Sass, too, and I was using Sass. Seeing how they organized everything, how they were getting to that point, how you could customize it and everything.
That's sort of the idea that I want to do. Instead of reverse engineering it like I did, let's try and understand how it's working so if you are using whatever framework it is or if you're using Tailwind or anything like that, if you understand the core language, I think you should be able to pick those up pretty quickly. It's different ways of authoring the CSS.
Chris: You're building a system, like it or not.
[Laughter]
Chris: Yeah, and it's true that no matter what, as weird as it gets, you could be using something really weird. Maybe that's like CSS and JS-like, but then turns itself into Tailwind classes to apply itself - or something. You've taken some weird old left turns to style this website. Still, at the end, it is CSS.
Kevin: Mm-hmm.
Chris: There is no alternative language for styling a website. There's a little bit of HTML that has some implicit styles. But for the most part, it's CSS and you have no option. [Laughter]
Kevin: Yeah.
Chris: There you go.
Kevin: Yeah. You need to understand the implications of what it's doing when you're using all of this stuff. I think that's the part. Again, that's why tools like Tailwind have exploded (and, before that, Bootstrap) is because it does take some of that off.
There are so many people that, as you said, these JavaScript people, that's their focus and they need to style the site. The same for me.
Chris: Yeah.
Kevin: I am so much better at CSS than JavaScript. When I get into the JavaScript side of things, I'm spending so much more time on it because it's a lot more Googling, a lot more Stack Overflow, a lot more figuring things out.
Chris: [Laughter]
Kevin: Whereas if you're on the other side of things, you don't want to necessarily be doing that. You just want to make it work, and so I get why those things have exploded and why there's always going to be something that's sort of solving that problem in one way or another.
Chris: Yeah. Yeah. Maybe even more, there are multiple ways to attack this problem in CSS than other languages. I'm not sure if that's entirely fair, but I'll throw that out there for now that if me and you looked at the same exact UI, we could probably both get real close and both make pretty okay choices and have it be pretty different, too.
Kevin: Yes. Definitely.
Chris: Which is a huge turnoff to some people, I think.
Kevin: 100%.
Chris: Which is why it's crucial. Like how you said it. Let's look at what we are doing and make some choices based on the parameters of what we're doing.
Kevin: Mm-hmm.
Chris: Yeah, and if you don't start like that, man, you're kind of like -- I don't know. I hate to say it, but maybe learning the wrong way.
Kevin: Yes.
Chris: Yeah. [Laughter]
Kevin: It is very nuanced in a certain way because I was recording something this morning, and I used a position absolute and then had to center it. Then it's going -- it is that whole joke of, with CSS centering is hard, which I think it's changed.
Chris: Yeah.
Kevin: I still see it come up on Twitter and stuff, but even when I went to do that. It's kind of funny because I'm going to position absolute, so now I'm doing the whole top left 15% and then the translate minus 50% to bring it back.
Chris: Sure. Uh-uh.
Kevin: We still need do that now in this certain context even though, in this other context I'd be doing it, so if you're someone who is not comfortable with all -- going, like, what do you mean I have to use this completely sort of obtuse way of centering something when I thought this was easy now? There is that weird -- you know there is--
Chris: That's a very good point. Yeah. Like, "Yeah, sure, it's easy when you use the new stuff." [Laughter]
Kevin: Yeah. [Laughter]
Chris: But then there's the old stuff. But then I'm surprised you didn't--
You go top left negative 50%.
Kevin: Yes.
Chris: But even top and left have changed now, so really, you should have used whatever it is - block.
Kevin: Oh, that's right. Yes.
Chris: How do you say top in a logical property? What's top?
Kevin: See, you caught me on something that I need to look more into because I've been using inset all the time now.
Chris: Yeah, but that's only all four values.
Kevin: It's all four. But inset was part of the logical property spec. But from what I understand about it, it's not a logical property and the top value is always the top, still. I'm just like -- I just read one quick thing on it.
Chris: Oh...
Kevin: I never bothered to dive deeper into it. I'm just like, "Wait. I'm confused now." [Laughter]
Chris: Yeah, that's a weird one.
Kevin: Yeah.
Chris: I thought that was a good one, too. But if they're all the same, like if it's inset zero or inset ten or something, then who cares then?
Kevin: Right.
Chris: But as soon as one of them is different, then it's not logical anymore? Oh, that sucks.
Kevin: Something like that, yeah. But I guess that's one thing they haven't figured out with the absolute positioning. Even logical properties are one of those things that, like, for margin inline, padding inline, and stuff like that, I'm using it a lot. Even the block ones. But for whatever reason, when it comes to widths and stuff ... width, and I don't even--
I was doing something with Adam Argyle a little while ago, and he was just like -- we had to set a width on something. It was a block size or size block - whichever one.
Chris: Yeah, block size. Size is a keyword we haven't used much in CSS.
Kevin: Yeah.
Chris: You have to say block size.
Kevin: For him, it was just like second nature.
Chris: Mm-hmm.
Kevin: He didn't even think of using width. When I first saw it, I was like, "Oh, yeah. Okay. [Laughter] It's funny how, for certain things, I've picked it up right away and other ones just--
Chris: Right. I hate to tell you is actually kind of a bummer. Having a half-and-half code base sucks because if something else sets margin-bottom and you were all in with your new knowledge and say margin block end, it doesn't override margin-bottom.
Kevin: Yes. That's so frustrating.
Chris: You don't want to live in that world. Yeah.
Kevin: Yeah.
[Laughter]
Chris: It is a bit. Yeah, I've been kind of struggling with that because I'd say every one of my sites is a little unholy combo in a way that I'm not super proud of but I'm starting to understand the problems with that. It could be a little sprint. Let's say that people out there working. Why don't you take this week? It's a short week, at least in the U.S. for Memorial Day. Just convert all your stuff.
[Laughter]
Chris: 100% conversion because I don't think you'll regret it. The browser support is there.
Kevin: Yes.
Chris: For the most part. Okay, well, we could talk about CSS for 100 years, Kevin. I'm sure we could. [Laughter] I really appreciate you taking the time to talk to me about all you've got going on. I'll tell you all out there, go to beyondCSS.dev. That's the upcoming course. You might as well get in on that. Just Google Kevin Powell, you'll find all his other stuff including his YouTube. Like and subscribe, folks. Anything else you want to leave people with before we go, Kevin?
Kevin: No, that's awesome. Thank you so much. Yeah, thank you so much for having me. As you said, we could keep on going, but it's been a blast.
Chris: My pleasure. Take care. Talk to you soon.
Kevin: Take it easy.
[Radio channel adjustment]