679: Two Idiots Argue With Kevin Powell About CSS  ## Metadata - Author: [[ShopTalk]] - Full Title: 679: Two Idiots Argue With Kevin Powell About CSS - Category: #podcasts - URL: https://share.snipd.com/episode/c2f497d3-a127-48fa-bd64-20395ef8b1d0 ## Document Notes ## Highlights - **Unexpected Channel Pivot** - Kevin Powell started his channel intending to teach WordPress but pivoted to CSS and kept a few unpublished WordPress videos. - His CSS focus became the channel’s bread and butter and attracted the audience he has today. Transcript: Chris Coyier That's uh i would assume if someone knows me that's where they know me from yeah right yeah very likely and just on the heel we'll we'll say that we, we talked to Kevin before he hit 1 million Kevin Powell Subscribers on YouTube because it seems like you're just, um, days, weeks away. We'll see. I don't know. It's, it's dragging on at this point. The subscriber number, my kids are bugging me all the time now. Like, when are you going to get there? And I'm like, Oh, I don't know. It's going to be a little while, but. Dave Rupert Patience yeah wait for the shop talk bump right here here it's coming yeah so no uh i i like to tell people i know you um just say we're in some street cred so it's just like uh my friend uh kevin Chris Coyier Powell um yeah and it's our very favorite topic usually i'd say i mean i don't know i can't say i've listened i've seen every single one of your youtubes but probably a lot of them and you Tend to be the css guy right so that's your that's your main topic on there i think we can get to that more but that's is that true that's your main kind of yeah it's sort of the bread and butter Kevin Powell For for everything which is kind of cool that that managed to happen but yeah it is cool because it's a little ([Time 0:01:38](https://share.snipd.com/snip/e6ac849c-7ad7-4ffb-9fac-db08ac006984)) - **Seasons Of CSS Content** - Kevin says CSS content keeps expanding because new features keep appearing, so he rarely runs out of topics. - He cycles through focused "seasons" of features which fuels sustained content ideas. Transcript: Kevin Powell Yeah. And these days, like, you know, in a sense, like people have been like, you know, are you running out of things to talk about? And I'm like, actually, the opposite is true right now. It seems to be that I can't keep up with everything to talk about because it's insane what's going on. Chris Coyier Is that true? Yeah, it's like you have no there's no brain shortage. Dave Rupert It's a good set of years to pursue a YouTube career in CSS. Oh, my God. Yeah. Chris Coyier It magically kind of worked out probably, you know. Dave Rupert Yeah, totally. Chris Coyier I sold a CSS publication right at the worst possible time to, no, not really. But it is interesting. So what is like, is that, I don't know, I think it'd be fun to like get into some CSS stuff because I'm, you know, people love that. I love that. But, you know, it's hard to avoid the YouTube thing for a little bit, like just extracting some details from you. What is like, is that like the driving internal thing? Like you wake up in the morning, we're like, I got it. I better get, I better make some progress on the next YouTube video. Is that like the number one piece of content that you produce is like a new video? Kevin Powell It depends, I guess, on, I go through sort of like some cycles and different things. So like YouTube's a big part of that. And then the rest of it's still content creation in general, because it's courses and other things, too. So working on lessons and all of that set of things. So sort of the main thing is bouncing back and forth between between ([Time 0:03:57](https://share.snipd.com/snip/ccd27358-9a48-4e7a-ad41-9fda0189fa85)) - **Start With Value, Then Build Demos** - Build videos around the specific value viewers will gain, then create a demo to support that lesson. - Use starter templates to avoid rewriting demo styles repeatedly and save editing time. Transcript: Kevin Powell It depends, I guess, on, I go through sort of like some cycles and different things. So like YouTube's a big part of that. And then the rest of it's still content creation in general, because it's courses and other things, too. So working on lessons and all of that set of things. So sort of the main thing is bouncing back and forth between between those two. Chris Coyier And a video might be just like a totally standalone thing. It's just like, I don't know. I just want to teach you all some stuff about CSS or whatever. And probably all of them are to some degree. But if you had a brand new course, would it be true that you'd like, I don't know, make videos that serve the sale of that course to some degree? Kevin Powell I should. I'm not very good at that. I don't know how to do any of this stuff. I'm just like, I got here by accident. So I'm just trying to figure it out. And I'm always like, oh, I should do this type of thing. Um, but then I, I don't always do it as much as I probably should. Yeah. Uh, relatable. Dave Rupert Yeah. Do you feel like if you, is it kind of like, just keep doing what's working or is it, cause I feel like, you know, Chris and I talk about this a bit, ([Time 0:05:00](https://share.snipd.com/snip/72e5d7c7-28a4-42eb-be94-bc769e80e5d6)) - **Ship Faster With Reusable Starters** - Don't over-polish demos from scratch; reuse starter templates to speed production. - Record when you already have a demo to reduce editing friction and improve output consistency. Transcript: Kevin Powell And it ended up being like super popular and people were like, Oh, you make mistakes when you're writing code too. And you have to look things up. And I'm like, I didn't know. You didn't realize that. But I guess if the only thing you're ever seeing is sharply edited YouTube videos, you get that impression from it. Yeah. Dave Rupert Um, yeah, dude, like, so that kind of formula, like pick a dribble and go for it that's been kind of successful for you yeah they work well people like those for sure um like i see you still Do that from time to time sometimes you have like kind of a you're doing a whole side or something but i feel like you that's like an old standard you can go back to kind of yeah exactly i find Kevin Powell I go through like season or you can tell what i'm like interested in at the time looking at the type of content i'm putting out yeah you know like recently i've been playing with a lot of Anchor positioning so that's showing up in the videos i'm like oh that was fun and cool and we couldn't do that before or you could, but it was really hard. So then I make that. But then as I'm making that, I get ideas for other things. So then I definitely go into like these like seasons almost of like specific features as I'm exploring them more. Chris Coyier Yeah. Yeah. But there is a, you, you explore it well though. Let's say I did a, I've been, I've been into anchor positioning too. And, and, and I'm in like, you know, my little baby streaming career. I did a couple of streams on anchor positioning and then but the problem is I like start from absolute scratch nothingness. Right. So I'm like on a, I'm on like a times new Roman lorem ipsum page rocking a, you know, a tool tip that I want to position. And then in a way, I think anyway, it harms the video to some degree, because you're looking at something very unrelatable. And it always seems like, you know, true or not, that by the time you're showing something and playing with it on a video that there's like some polish. There's something more relatable to it. It looks more like a beautiful page that you could kind of see yourself at work using or something. Is there like a like a minimum level of polish you shoot for on these demos i do try sometimes that's the worst part too um you'll see some like coming up with like the rough plan for it's Kevin Powell Usually pretty easy and then recording editing that's not too bad like that middle thing of like okay now i have to build a demo. Sometimes sucks. Yeah. Like, okay. Let's like, and then like, I have a few code pen starter templates that I do just to have some styles in place. So yeah, because if not, you're just rewriting it over and over again was kind of infuriating, but then I'm always changing what I need. So it's a bit frustrating there. But then the opposite does happen where I make the demo first, just because I'm like the video, my most recent one where I was looking at like a navigation thing. I was just playing around with it, made the code pan. I'm like, oh, this would make a good video. And I already have the demo in place. So this is perfect. Chris Coyier Oh, but that's the anomaly though. Like that's a sometimes ([Time 0:07:27](https://share.snipd.com/snip/f1f2e59e-e0f4-4c68-ac11-89166d99561c)) - **Virality Is Unpredictable** - Kevin can't reliably predict which videos will go viral; his expectations often invert reality. - Crafting curiosity-driven but honest titles helps pull viewers into niche topics like accessibility. Transcript: Kevin Powell I find it i usually find out if if i assume it's gonna do super well, it's usually terrible. And yeah, I still have no idea. There's a few things. It's like if you can make a clickbaity enough title around the topic, you can you and if you look at it, you're like, OK, that's a good one without being like overly clickbait because people Get angry at you then. But like, you know, like one of those like titles that can like hook someone in versus like learn about the has selector like people that don't feel like learning about it aren't going To click on that whereas like actually interestingly there i find the easiest ones to do that are for accessibility things um because i did one on just like the the skip skip to main link And like that's like every website has one or should have one of these or something like that i don't remember exactly what i titled it but it was like you know you should have one of these But you probably don't type of thing and yeah i and then like i did get some complaints on whatever title i went with on that but i was like you know what like i don't care because it's an important Message and an important topic so if i can get more eyeballs on it the better um yeah yeah so there is like that balance the perfect one that's such an interesting because you could have Chris Coyier Titled it how to make a skip to content link and it would have got what ([Time 0:12:20](https://share.snipd.com/snip/62b4de17-49b2-467d-87dc-b67327eae082)) - **Masonry Will Become A Display Value** - The CSS working group resolved to implement masonry as a new display value rather than keeping the masonry name. - They may prefix it with grid to reuse existing grid properties and reduce new syntax surface area. Transcript: Kevin Powell And then we're still figuring out what that's going to be today. Dave Rupert Oh, let's get the old Kevin Powell verdict on item flow versus display grid or display masonry. Chris Coyier If you type CSS masonry into YouTube, you definitely get Kevin. Kevin Powell That's not bad. They actually resolved yesterday to make it a new display type. Chris Coyier Oh, you're kidding. Is that the news? Oh, I'm hearing this for the first time. So Apple lost. Kevin Powell That was. Oh, yeah. That was in. Well, I hope I'm getting that right. But I'm pretty. That's in the GitHub repo. If I can find that again. Yeah. But on the issue for it, they said the. This is off my memory, but they resolved to a new display value. The new display value will be grid something. And the something hasn't yet been decided. And they're going to open a new issue to talk about the name so not so not mason oh it's i like that because i whatever sorry david desandro i really like you you're a great person the the Chris Coyier The library was good but i like it when names have like real they like mimic a real thing and like masonry layout is like a brick wall sideways nobody makes walls like that and i don't like The word just only for that reason but that's just me being pedantic okay so the word masonry will probably never die but the actual keyword will be something else yeah right which is Also my least favorite way to do it i'm sorry to be i just don't like that now we have to repeat a whole bunch of new properties to make it that, unless maybe we don't, I don't know. I guess I better stop speculating. Kevin Powell You mentioned item flow. I think the idea with that, like we have, there's the whole item thing. We're going to have a lot more of a universal properties across flex grid and whatever masonry ends up being called so i think that will hopefully mean so you maybe it's a both like we'll Chris Coyier Get item flow and we'll get the new keyword yeah i'm pretty sure that's what's happening yeah oh okay wow well that's confusing but i guess well if they named it like grid dash whatever, Dave Rupert Rupert, let's just throw that one out there. Sure. Rupert. Chris Coyier Love it. Dave Rupert Grid stack I'm seeing here. Kevin Powell Yes. Grid stack seems to be the, I think that's the only proposed one so far. Then maybe it can still use the grid columns syntax. That would be ideal, right? ([Time 0:16:47](https://share.snipd.com/snip/17381d89-f470-497f-a7ed-441add194afe)) - **Show New Features With Caution** - Wait a bit before deep-diving on bleeding-edge features; watch other browser implementations first. - Mention progressive enhancement and cross-browser caveats clearly when showing new APIs. Transcript: Chris Coyier Una published about popover hint. So you probably, I bet that you've got to have done one on popovers, right? That's pretty, pretty hot. Even popovers, a little shaky on browser support, right? But it's pretty cool. So yeah, so just popover in general. Yes. What about popover hint specifically to niche? It's probably worth looking at. Kevin Powell Um, yeah, I think, I think I've definitely, I'll probably wait on it a little bit, but not too long because it's cool and useful. Yeah. Yeah. Part of it does come. I guess I like just seeing like where it looks like the other browsers are going with it, too. Like if Safari all of a sudden it's showing up in technical preview or something, then like, yeah, let's make a video. There you go. Chris Coyier Yeah, it's in TP. Dave Rupert So it'll be in. Oh, there we go. It's in data. So it should be in the new Mac OS. Nice. Okay. Chris Coyier Well, then I was playing with, I hadn't realized that there was a implementation of that. This is new to me. I'm not trying to like, be like, look at me. I know new stuff too. Cause I just read this blog post, but there's a, there's an interest for attributes that's related to it and it means it basically means like hover or you tab to it meaning it's the first Time we've ever had like hover in c in html ([Time 0:21:33](https://share.snipd.com/snip/71a1b41c-b54b-448f-910e-24944ecb9626)) - **Feature Adoption Hinges On Browser Parity** - Some modern CSS features land in one browser and stall, creating long waits before cross-browser parity. - This uneven rollout shapes whether and how developers adopt features in real projects. Transcript: Chris Coyier Size uh what's the thing for that one like allow keywords or something like that. Yeah. No, no, not even a whiff in Safari and Firefox, but we've had it for a minute now in Chrome and it's epic. It's so cool. You know, it is. That's a, that's a, that's a tricky one, isn't it? I keep, I keep watching and seeing if we get stuff to use for that because it's one of those ones for like, you know, we're all approximately the same age, right? Like our entire career has been like, well, you can't do that. And now all of a sudden you can. And sometimes CSS stuff moves really fast. And you just get it all of a sudden. And this is one that is not, that's not the case. Kevin Powell Yeah, which is a little frustrating but it is a nice that one's definitely i i have included it in videos i haven't made a video that's just like this is let's look at this one thing but i've Done it i've used it in things um actually i think one of the ones i did it in was like animating a detail summary um and even with that it was a bit annoying because the i think you can do that In all of them or at least within safari too but on some of them like they have a new pseudo class for the details opening and closing content or no oh there's a new like for when it's opened Or not to detect when it's open or not and i was basing i did my video using that. But then Safari doesn't support that yet, but you could just use the open attribute instead. And I'm like, why do we have a new pseudo class if I just use the open attribute? But I just followed like, you know, what I was reading about and working. And I guess I should have tested more. That's, I definitely should occasionally do some cross-browser testing before I make a video on something. ([Time 0:26:00](https://share.snipd.com/snip/9ed9b1c6-3b02-45c4-9540-937fead11f6b)) - **Shorts Breakthrough From A Thumbnail Quirk** - Kevin experiments with YouTube Shorts and noticed auto-generated thumbnails can unexpectedly boost views. - He finds setting custom short thumbnails cumbersome because the workflow forces phone-only edits. Transcript: Chris Coyier Yeah. Is it because it's fun or does it appease the YouTube gods? Dave Rupert What makes a good tech short? Yeah, like a good whatever CSS short. Kevin Powell Seemed my last i don't know i shorts too i i haven't really cracked it i don't know when one's going to take off or not um i don't know how important the thumbnail is for them because it seems To be ones that have like a thumbnail like i have one where it's just about um text what's i don't remember what it is where you can click on the i know it's all is the value you click on it and It select all the text but anyway it's us really yeah uh it's called anyway the title of the video is make any text instantly selectable um but on the thumbnail that just got auto-generated It says be careful with this and really big type and i'm like and that one took off subtitle yeah and i was like and it worked out perfectly and the video took off but i'm like is it just because Of that thumbnail but then setting thumbnails on shorts is the stupidest thing in the world because you have to do it on your phone it's not through the youtube studio it's through the Page you go on the i don't know i've tried it like three times and it's just the the worst experience ever so i never bothered doing it. Chris Coyier But you think, yeah, most shorts are seen because you're just whipping that finger. Exactly. Yeah. Kevin Powell I think you need movement or something within like if you're just showing code and nothing's happening. You do see that title. Chris Coyier I bet the title of the thing is be careful with this. Kevin Powell I think that comes at like halfway through. The title, the actual titles make any text instantly selectable. It's just like an on-screen graphic I have at one point. ([Time 0:29:13](https://share.snipd.com/snip/8e7dfb30-44d3-42c5-a9d2-da33957ba604)) - **Iterate Thumbnails And Titles** - Use thumbnail and title A/B tests to learn what hooks viewers and to improve discovery. - Change thumbnails or titles after release to retest and potentially trigger new audience pickup. Transcript: Kevin Powell I have the A-B testing for thumbnails. And I'm apparently in the list to get it for titles now, which I'm looking forward to. Chris Coyier Yeah. Dave Rupert Cool. That'd be kind of cool to know. I don't know. Cause we, I think ours all, whatever our, our, we're not a media empire here or ([Time 0:33:01](https://share.snipd.com/snip/7e814ceb-3e1e-4b46-94d4-a12706c30ad2)) - **Careful Full-Time Transition** - Kevin transitioned from hobby to business after years of gradual growth and set financial rules before quitting his job. - He required six months savings and matching content income roughly equal to his salary before going full-time. Transcript: Kevin Powell Like because you made that switch right yeah like yeah i it would have been i'd been thinking about it okay well i went at the beginning it was this is a hobby project that nobody's watching Anything i'm doing uh and it stayed like that for quite a while and then slowly it got a bit of traction at one point it was sort of like oh i have coffee money now that's kind of cool then it Was date night movie or money um and then at one point it was sort of more of a side gig. And I'm like, I guess I should take this a little bit more seriously. And at that point, it was sort of at the back of my mind of like, could this, you know, so far it's going in the right direction. Could this become something bigger or something that I can focus on entirely. Uh, so I had been thinking about it for a while and I sort of came up in my mind is I need to have six months of savings on the side of like what my current salary is. And I have to be making at least roughly the same salary from content than I was from my job. Um, and so between most of my income comes from courses and not from YouTube, YouTube is, I guess, but it's, uh, yeah. So during COVID YouTube, I mean, my, everything exploded on everyone was just on their computer ad rates went up, views went up, everything went up. So like the revenue during that time wasn't too bad um but i've always treated the youtube income as sort of a bonus as part of my content you know it's sort of top of the funnel of my business Um just because yeah i wouldn't be able to live on youtube alone right now uh so courses are the main thing. ([Time 0:36:20](https://share.snipd.com/snip/c459662e-fe4e-493d-8821-82da1c5b9465)) - **Diversify Revenue Authentically** - Diversify income across courses, sponsorships, and platform revenue to reduce risk. - Prefer promoting only products you personally use to stay authentic and avoid mismatched sponsors. Transcript: Kevin Powell That's the right idea yeah now but it's hard to find avenues like i know some people that make tons of money from advertising just in their videos and stuff but i'm like for me first i'm Picky i don't want to just you know i get seven emails a day from hosting companies and i'm like i don't use any of you so i'm not going to promote you um but then when it comes their money what Are you doing i'd rather you know i don't know i have enough trouble promoting my own products so like promoting someone else's hard i'm like and if i could find like good paid products That could be implemented into my videos i'd be happy to but i'm like i do vanilla css there's not a lot of like paid products that we're going to this workflow of what i'm doing here so no Chris Coyier I have i happen to own one we'll talk when our new the new code pen launch we'll get you we'll just see if see if you got an opening feel free to send those hosts over to us we'll take them definitely Kevin Powell Yeah i know i, I could forward every market email I get toward you. If you want. Dave Rupert Virus box. Virus box is the best way to host. Host gator. Chris Coyier Chomp, chomp, chomp. See, we add only stonks go up over here so oh man that's the best all right you do quizzes too that's kind of weird not it's weird in that i you're the only quiz i ever see on youtube i just do Kevin Powell Those actually i started them for fun and then i've continued doing them because sometimes they do give me content ideas um when i see I ([Time 0:41:12](https://share.snipd.com/snip/6d1054e8-728d-4407-ad14-d8dcb21adc4b)) - **Personality Protects Video From AI** - Kevin thinks video with a real human personality will resist AI replacement more than written content does. - He observes AI still struggles with CSS accuracy, so practitioners will remain needed for now. Transcript: Chris Coyier It seems like that's, it would be hard to, if somebody is like, I want to do what Kevin's doing, but with writing or something like good, it's, I feel like ai is influencing that maybe for Kevin Powell The worse like that would be harder to do they ai can't do what you do it can't do it it can't be kevin powell you know i i just signed up for a new beta feature on youtube to prevent deep fakes Of me oh wow so it's like was it a problem? Dave Rupert Was there a problem? Kevin Powell I think they're getting ahead of it. Dave Rupert Well, I mean, there's enough video out there of you now. You know, like, it's just, wow, interesting. Yeah, do you think about the AI, like, chipping your business? Like, CSS education? Or are you not worried? Kevin Powell A bit concerned, because I do think there is a shift I think I think the advantage a little bit to what you're alluding to Chris about like if you're doing it with written it's different In that at least with video and my face being in the video and stuff like that like part of it is the education but part of it is the personality and the authenticity of it in that. And I do think with the rise of AI, I'm hoping, I guess at least that like the idea of like authentic people and brands and things like that are going like, it's going to play into things. And that's so much harder to have with writing. I mean, with writing, there's, you know, first of all, there's the amount of slop being generated that you're competing against. I guess video is having that same issue now, though. You also have the, you know, Google apparently not wanting people to click on links anymore, which makes life harder and is an interesting pivot. So, you know, you're fighting on a few different fronts there. Uh, there is the whole, like what's happening with education thing now though, which is hard. Um, but again, maybe I'm lucky for the time being anyway, cause AI is pretty bad at CSS. So I feel like I have a discord where like a lot of the questions are like people going, like, I tried, like, these are the prompts I've been using and it's still just not working. What am I doing wrong? And it's like, Oh, it just got this fundamental thing wrong. It was actually pretty easy. So as long as I keep seeing that, it'll hold out some hope for me. Chris Coyier Yeah. People just like it probably, you know, like I don't, I don't know. There's probably lots or most people watch you, you know, not because they're learning every sentence that comes out of your mouth, they're learning for the first time, but there's An element of like, I just like it. I just like, enjoy it. It's a little bit like a, I don't know, people would read a magazine or something, but in the new world, we watch YouTubes. I don't know. Cool. Yeah. Nobody can do that, but you in this case, you know, like, yeah, it is. Dave Rupert It's interesting. Just like, I think you said it earlier, kind of like with videos, like people want the answer now, you know? So like, and we have an answer me now machine, you know? And so what, what happens? I think that's kind of like an interesting thing to think about, like just the instant gratification. Are you going to be pushed towards that or what? I don't know. Who knows? It's a good question. Kevin Powell Um, I do know like a little bit of my analytics, like I still get, I think half of my views come from old videos still like more than two years old or more than a year old. So like that to me is a lot of the searchable content that I still get a lot of views on is just answering questions. Um, but I'm like, that would be an interesting one to follow to see how the more like search based stuff goes. And if that's declining versus like, I'm doing CSS battles, which are fun. And it's more of like the edutainment style thing and leaning more. And you can, you know, you can have fun, you know, creating stuff. And I know for me, when I'm watching videos, a lot of the time, it's like you said, Chris, it's not learning line by line, the code necessarily. It's like, oh, I never even knew that feature existed. And you just sort of park it at the back of your mind for when you need it next time or something like that. ([Time 0:49:14](https://share.snipd.com/snip/3164e24b-9fe4-48f3-9876-fd24abf88855))