CSS with Kevin Powell 
===

~Test, test, test.~

~Test, test, test.~

~Yeah. Just gimme one second.~

~I have to paste a link somewhere. Um, all righty. Yeah, we should be good. Let's do it. Let's get it. Oh, you're recording already. Damn. Awesome. All right. And~ [00:00:00] hello and welcome to Pod Rocket, the podcast brought to you by Log Rocket. Log Rocket helps software teams improve user experience with the session, replay, error tracking, and product analytics.

Try it free@logrocket.com. Joining us today is Kevin Powell, c s s evangelist. Kevin, welcome to Po Rocket.~ Um, ~I'm so thankful that you're here. I'm excited to get to know you a little bit better. And, ~um,~ for those of us listening, ~um,~ I'd love to love it if you could tell us a little bit about yourself and what you've been working on these days.

~Yeah,~ first, ~uh,~ thank you very much ~for,~ for having me on. I'm excited to be here. ~Um, yeah, so~ for those who don't know me, my name is Kevin, like you said. ~Uh,~ and I'd like CSS a lot. ~Um,~ my main goal is to help people fall in love with css, ~uh,~ cuz I know it's something that not everyone enjoys all the time.

And if I can't help you fall in love with it, I'm hoping to at least help you be a little bit less frustrated by it. ~Um,~ mostly through my YouTube channel where most of my content goes up, but I also have some courses and some other stuff now.

Fantastic. Yeah, I, ~um, I,~ I literally was writing css, ~um,~ by hand yesterday, just native, so no build, no sas, no nothing. [00:01:00] And I love it. So I've, I've, I've loved CSS for many years. ~Um,~ and it just, it felt so good, but it was only a matter of time until I. Accidentally selected the wrong thing and wondered why my styles weren't applying.

~Um,~ so I'm curious, ~since,~ since you clearly, ~um,~ have a shared love of css, ~um,~ as I do, ~um,~ and you wanna get others in love with CSS as well, I'm curious if you could speak a little bit to why that is. What's ~the,~ the motivation behind, behind it? Is it just purely this joy that you're like, oh my God, I'd love making things look the way I want them to look on the web and I wish others had that power, or is there more to it?

That's actually a really big part of it. ~Um, I've,~ I've been mucking around with websites since I was in high school in the late nineties. ~Um,~ but it was really like a hobby for the longest time. ~Um,~ and when I eventually started taking it seriously, I was doing some freelance work where I was making a, I was doing a lot of WordPress work and I eventually started doing a lot of child themes where I'd essentially just have ~like~ the main theme and I would delete the CSS file and then just build.

Like I, I'd have my design and I would just ~like~ figure out the css. That would work. It was ~sort of~ like [00:02:00] CSS Zen Garden style, but for client work in a way. ~Um,~ and ~like~ looking back, that's definitely where I ~sort of~ started falling in love with it. And that's ~like~ the process that I really liked ~is~ just like I can take the same general markup and everything and come up with completely different layouts.

And the challenge of that I just really enjoyed, ~um,~ and. Just the more I've done it, the more I've enjoyed it and I also see the frustration that others have. And I would be like, no, this actually can be a lot of fun. Let me show you ~like~ how it can be fun ~once you get past,~ once you understand, I think, how it works and understanding a lot of the fundamentals that people skip over early on, ~um,~ or don't fully understand the importance of, ~um,~ it can take a lot of the frustration away from it.

And so that's what ~I,~ I've tried to do my best to do. Yeah.

Yeah. No, ~I,~ I fully, ~you know,~ everything you said resonates so much because I remember, ~um,~ I ~kind of~ got into, I'd say very deep JavaScript or computer general programming and the CSS at the same time. ~Um, not,~ not that the two were. Different. They're both, ~you know,~ programming languages in and of themselves.

But like one thing in, say, JavaScript means another thing in css, and this took me a while. Like, for example, ~the, the,~ the negation operator. So the exclamation point, ~um,~ means not in [00:03:00] JavaScript and it means important in css, ~you know, so, Um,~ yeah, so I can understand, ~um,~ how you feel the challenge and also have this joy in, in helping others, ~um,~ overcome them.

~Um,~ CSS in 2023 has, ~you know,~ I've been around to quite a few conferences this year and I've seen great talks by people like Yuna Kravitz, Amit Sheen, Adam Argyle, et cetera. ~Um,~ and. Man, it's getting intense. Like CSS ~is,~ is growing rapidly. Things like container queries, that is selectors, that has selectors css.

~I'm,~ I'm seeing, and ~you can,~ you can maybe speak to this and maybe you can correct me if I'm wrong, is getting a lot more stateful ~um,~ among other things in 2023. I was wondering if you could speak to that and ~kind of~ help us understand. First why, and second, I think it's important that people understand when to take advantage of these.

Cuz a lot of these stateful things also you can do with like JavaScript for example. So this distinction ~of~ of why and when I think is key.

Yeah, ~uh,~ that's a really good question. And yeah, first of all, it's so exciting. ~Um, I, I was,~ I ~was seeing the other day on YouTube. I think I posted something saying, I, ~I think I have 650 videos now. ~And I was just like, ~and ~I,~ my list of ~like,~ Want to do is [00:04:00] longer than ever before. Cause there's just so much happening.

I'm like, I started my channel at the right time ~for,~ for ~getting, like~ talking about this stuff. Cuz it seems like there's a never ending, ~um,~ supply of content. ~Uh,~ but more to your question, ~um,~ I think's happening is we were in a place where we had to use JavaScript for things that seemed like they should be solvable with css, but they weren't.

Things like.

~um, even, I mean anything,~ a lot of the. Stateful things, but that should just be like, related to style. ~Like~ if the, ~like the~ browser should be able to understand that's going on. So even ~like a,~ like the has or with container queries, things like that, where for people that don't know has, it's ~sort of~ a parent selector, but it's also a lot more than a parent selector.

~Um, and, uh, or you know,~ just when it comes to those types of things, Where it, for a long time it was thought impossible. There was a lot of potential, like circular logic that would go in. ~Um,~ cuz if you're selecting a parent based on the child, but then the child changes, then the parent would change. That would just cause ~like~ the circular loop.

So they thought that was impossible. Container queries were long thought to be impossible. ~Um,~ so it was things that we had [00:05:00] to use JavaScript for instead. ~Um,~ and then the ~peop, you know,~ the software engineers that make the browsers are really smart. And I think it's been a lot of incremental things, ~uh,~ along the way.

The is selector, I think, unlocked a lot of possibilities, ~uh,~ with how it works. So then they're like, oh, ~well~ if we can do that, then we can use that to leverage this and then put these limitations on how that works. And I don't understand any of it. I'm just happy that they figured it out. ~Um,~ And I think for a lot of things, if you can solve it with css, ~uh, it's probably, you know,~ if it's related to styling and we can do it with css, we might as well.

There's even like scroll based animations and stuff that are coming too with scroll timeline. ~So, Um,~ there's, I don't know, there, there's so much really cool things that are on the way. ~Um,~ I guess right now, the big thing is can I use it just based on browser support? ~Um, you know,~ we have all these new things coming, but obviously we have to worry ~about if the, our clients can actually, you know,~ does it work for our client or not?

~Um,~ and when can we start using it?

Yeah. ~Um,~ so if I heard you correctly, ~um, and,~ and please correct me if I didn't. ~What, what,~ what I understand is CSS was supposed, ~well,~ maybe not, was supposed to, but there's a lot of presentational logic that. Is better [00:06:00] suited to be solved with CSS that we've solved with JavaScript just because CSS didn't have support for it in the past, but now it makes sense to handle what we call the presentational.

So visual aesthetic state with css and then maybe Logical State with JavaScript. Is that, do I understand that Divide correctly.

Yeah, that's a much more eloquent way of saying it than what I said.

Awesome and good. ~I'm,~ I'm glad. I'm glad it's tracking. You mentioned a couple things. You mentioned the is selector, the has selector and container queries and you mentioned the IS selector being this like game changer. It's very powerful, primitive. I'm curious if for the listeners you could elaborate a little bit on, on the IS selector what it is, why it's such a big deal, and then maybe after you're done with that, we can go to the has and container

Mm-hmm. So ~is~ is one of those things that a lot of people, even when I show it or talk about it, they're like, oh, ~I don't,~ I don't really see like the importance of it. And I think it doesn't change that much in a sense, just because I. It at its core, it doesn't really enable new things. It's just ~sort of~ a, it can be a more concise way of writing your css.

~Um,~ and for, ~if you,~ if you're not familiar with [00:07:00] it, basically it's, you can do it, it's a pseudo class, so you, you do ~like~ the single colon is, and then open, ~um,~ the parentheses and then you can chain your selectors in there. So just like before, we could have commas separated. Selectors, you're putting your commas separated.

Separated selectors inside the is, ~um,~ function. And. You can just make much more concise things. So you could say ~like, um,~ is H one, H two, H three, and then, ~uh, you know,~ a space after that and put an A. So it's any link that's inside your H one, H two, H three, ~um,~ and if you go on the MDM and you look up is they actually have this one example that's I think ~like,~ Probably a hundred lines of, ~um,~ these, ~you know,~ this a hundred line selector, it's like a grouping of selectors that they bring down to ~like~ a four line selector using is.

~Um,~ so it lets us write much more concise css. So it's a little bit of a better experience in a sense. ~Uh,~ but it's not, ~it,~ it didn't enable anything from an authoring point of view that we couldn't do before. It just made things a little bit easier. ~Uh,~ but from what I understand, it's ~sort of~ the underlying technology or the underlying whatever engineering that went in to make that possible is what's [00:08:00] enabled other things.

~Um,~ and opened other doors. And I hope I'm not misspeaking on that one cuz ~um,~ that's something I'm ~sort of~ remembering off the top of my head. So it could be, it was something else, but I think it was, I think it was part of at least, ~um,~ what's opening the doors for some of these things that are on the way.

Would it be fair to say that the is selector is somewhat syntax sugar?

~Uh,~ it could be considered a little bit. Definitely. ~Um,~ and you do have to be careful with it cuz ~uh,~ one nice thing with it versus just having like your comma separated list of selectors, ~um,~ is it fails gracefully. So if you have a comma separated list of selectors and one of the selectors is invalid, which it's ~kind of~ weird to have an invalid selector, but it can potentially crop up just through ~like~ a typo or something, it invalidates the entire rule.

So like all of them go out. Whereas if it's in is it won't invalidate. It just doesn't select that one thing that doesn't work. ~Um,~ and the other thing with it is the specificity is a little bit different because it's one single selector instead of being a whole bunch of selectors. So it takes the highest, it takes the specificity of the highest selector [00:09:00] inside of ~the,~ the parentheses.

So you could in a way use it to like boost specificity just by putting. An ID selector in there. ~I,~ I wouldn't really recommend this, but ~like,~ say you needed to boost specificity for something cuz you just need to, ~um,~ there's hacky ways of doing it and this is probably a nicer, hacky way instead of ~like, you know,~ doubling up a class just for the sake of it.

And it could be a, ~like,~ it, the ID doesn't actually have to exist. You could just put ~like,~ ID example and it just by being in there, that selector now has that specificity. But it's also, ~you know,~ if you don't know that and you have an ID selector in there, You might have increased the specificity without realizing it for other things you're trying to select. ~Um,~ and just really quickly on that note, there's also the wear selector and wear is exactly the same thing as is, but it has no specificity whatsoever or anything that's within the parentheses doesn't count towards specificity. So you can make zero specificity selectors, which if you're just doing like a quick reset off the top of your page, ~um,~ I think one of the resets actually does, or ~like,~ not normalized, but.

Is it sanitize the one that's ~sort of like, that's sort of~ an ~opinion,~ opinionated version of [00:10:00] Normalize. I think they use wear for everything now. ~Um,~ and there's different things you can do. Just be, oh, I need this not to have any specificity. That can be really helpful at

Right. ~Um,~ I, I have a question that I think the listeners would appreciate getting some insight on, because in css, ~as,~ as is the case with everything, html, JavaScript, whatever, ~there's,~ there's ~many,~ many ways to skin a cat. Not that I recommend skin cats, but ~you, you know,~ the expression. ~Um,~ and for example, if I wanted to do ~like~ layout ~right,~ I would probably reach for.

~Um,~ if this was a few years ago, I would reach for Diviv, sorry. I would reach for Diviv with, with Flexbox, and I would, ~you know,~ do Flexbox magic. I'd have my Flex Row and columns and ~kind of~ organize a nice little grid. And this is because I've been living under a rock and I haven't heard of Grid, which, ~you know,~ grid makes this a lot easier.

Not probably, definitely makes this a lot easier. I use it daily in production. ~Um,~ similarly, Inflex and Grid, there's the gap. Rule. ~Um,~ that is awesome. It's just gap. It's not flex gap, it's not grid gap, it's just gap. ~Right. Um,~ all of these things exist, but, ~you know, I,~ I wonder for people who maybe don't know that they exist, for example, I imagine there's a lot of people who [00:11:00] don't know that has wear is container queries, style queries, color spaces there, ~like~ there's a lot of communication around it.

Absolutely. But there's also a lot of people without the means to access that communication. ~Right.~ And ~so,~ I bet you there's a good portion of the world writing layout with, ~um,~ inline block, like not even flex box, ~um,~ or like display ~table,~ table cell, table, row. ~Um,~ so how would you, what's the best way you would recommend for people to stay up to date with what to use and when, given that there's so many different ways to solve similar problems?

~That's a real, uh, ~I, it's hard for me in a way to, to give good advice there cuz I'm in a really privileged position where my job is literally to teach people all of this. So I'm just trying to stay up to date and it makes it a lot easier for me.

if you what If you share with people how you stay up to date so that you can do your job?

Yeah, so the main things I do is following people on social media. ~Um,~ usually, ~um,~ there's all the, you mentioned Adam Argyle before and the different people. There's, ~uh,~ Anuna, ~um,~ anyone who works on the browsers basically. So there's like the whole, ~um,~ there's Braus too. They're all on like the devel team [00:12:00] for Chrome.

~Uh,~ they're just constantly telling people about the new stuff that's shipping and showing examples and doing really cool stuff there. ~Um,~ there's, each one of them has their own, ~uh,~ blog as well. ~Um,~ following just the browsers and seeing what's like when a new release comes out. The change logs always there and they always ~like,~ here's the new JavaScript stuff, here's the new CSS stuff.

And you just ~sort of~ scroll through and be like, I've never heard of that. What, ~you know,~ what is that? ~Um,~ so I tend to follow that. But like with the, ~you know,~ with chromium, ~um,~ not the chromium, but ~the, the,~ the canary and Firefox nightly, so I know like as soon as it ships and it's like still experimental, I'm keeping up with it cuz that's what I need to do.

~Uh,~ but you could just be watching the stable channels and seeing just what's released in ~the,~ the latest stable one. And just being like, oh, there's a whole bunch of new CSS stuff I've never heard of. And they usually, these days also provide like some information, ~uh,~ or links to some of the things. But even if they don't, you just copy paste and then be like, oh, look at all this new color stuff and maybe you have 15 minutes just to ~sort of~ catch up on it.

~Um,~ and so much of web dev [00:13:00] stuff these days in front end development isn't knowing how everything works. It's just knowing ~that~ that thing exists. So when it comes up, then you're going, okay, I know there's, I heard something the other day. Let me just Google that and see how it actually works. So I might be able to use it or not.

Yeah. Yeah, that's definitely ~how I,~ how I roll. I know margin crim is a thing. I don't know what it does, ~but,~ but it'll be there when I need it. ~Um,~ I think also one thing worth mentioning for those listening who wanna stay up to date, there's an awesome Twitter account. ~Um,~ we'll put a link to it in the show notes called Intent to Ship.

~Um,~ and ~it,~ it just, they regularly share stuff that's going out to browsers soon. So that's a great source ~of,~ of feat of, ~um,~ news as well. Awesome. ~Um,~ I wanna talk a little bit about people who don't like css. ~Um,~ you and I, ~um,~ thankfully have in common ~that,~ that ~we,~ we genuinely love css. ~Um,~ and ~you know, I've, I've been,~ I've been through CSS through many years, ~uh,~ through ~the, the,~ the years of Clear fix and no, ~uh,~ float left and no real convention.

And then we had BAM, and then we had Atomic css, and then we had all this. CSS and GS type stuff and so on. ~Um,~ through all of that, there's always been critics, there's always been people who say, oh my gosh, this language is like the family [00:14:00] guy meme with the blinds, ~you know? Um,~ I'm curious for those people, what do you suggest they focus on to maybe help grow their love for CSS or help it be a little bit more comfortable?

So I think the first thing you have to do is embrace that CSS is different. ~Uh,~ it, it's not going to work like other languages. ~Um,~ it's not meant to, ~uh,~ there's, and if you want it to, then you're gonna be disappointed. ~Um,~ and part of the reason for that is also because it. We need to use it in ways that, like the other language, ~it,~ it is just so different in everything about it because ~like~ if you're shipping something that's going on the screen, you're not shipping absolutes, you're shipping like something that like maybe they're on an ultra wide and act for whatever reason, have it full screen.

Maybe they're on their phone, maybe they're on a, we don't know the device size, we don't know the color, ~um,~ like the color gamut that their screen has. We don't know anything. Basically the pixel ratios, anything like that, everything is different and we have no control over that. And so we're ~sort of~ shipping like best case scenario and trying to make sure that it just works on all devices and there's all these unknowns [00:15:00] about ~like~ what the final thing will look like.

So a lot of it isn't ~like,~ here's this absolute, ~like,~ it's not like the old days, like you're talking about where we used to, not even responsive, wasn't even a thing. You set ~like~ seven 80 by whatever height you needed and you just worked within that. It was almost like doing a Photoshop, ~right,~ where you had this absolutes and it was, that was the a completely different thing where you could actually know what it would probably look like.

Then it was more about browser inconsistencies than other things. ~Um,~ but now it's about just. Embracing the fact that CSS is different and it works differently, but that there's a good reason for that. ~Um,~ and being in ~sort of~ getting into the mental, the mindset of working with css, cuz it's different from working with all the other ones.

And I think the biggest point of frustration is when people are fighting against the browser, they're like, this is how I need it to look. I'm gonna try and make sure it looks exactly like this. And then you're just like layering all this coat. It's as you said, the family guy meme where you're just trying ~over and~ over and over again.

And it's just never, you just feel like super frustrated to buy it. [00:16:00] But with, ~you know,~ the browser does a lot of good stuff out of the box, and I think we should lean into that as much as possible. ~Um,~ I talk a lot about how like a website is responsive before you write any CSS and everything works. It doesn't look nice.

~Um,~ you can add just a little bit of code to it to ~like,~ make sure your images don't overflow, ~uh,~ maybe put a nicer font family on it, and you just make these incremental changes to improve on things. ~Um,~ and try and as much as possible take like the path of least resistance, right? The more code you're writing, usually you end up ~sort of~ cornering yourself ~and,~ and actually causing more problems than it's worth.

So yeah, trying to work with the browser as much as possible ~and,~ and understand sort of the constraints that come with working with the browser.

Awesome. That's really, ~I,~ I appreciate that. So what I heard was two things. One, ~um,~ manage expectations that CSS is a different language. ~Um,~ and it's different because ~it,~ it operates in an alien environment, like ~even,~ even JavaScript to some degree. We can make some assumptions about the run times, but css, I think you all bets are off.

And then two. ~Um,~ yeah, I like that you mentioned, ~um,~ lean into what the browser. Gives you, ~uh,~ by [00:17:00] default as well. Awesome. Thank you for that. ~Um,~ there's, ~um,~ People also getting into CSS these days. ~Um,~ starting where, ~you know,~ we didn't start, we started, like you said, we started with the, ~you,~ you, no response.

If you do 7, 6, 8 pixel with them, just go with it. ~Um,~ there's people now starting with all kinds of things with responsive web design, with pixel, ~uh,~ ratios. ~Um,~ nesting is now a thing in the language, in production. It's production ready. We don't even need sas. We just have nesting. ~Um,~ I'm curious if you could speak to.

Some of maybe the students ~you, you, you,~ you coach on, on the newer experience getting into CSS versus how it was back then.

Yeah. So first I'm really jealous they're coming in now cuz it's so much nicer now. ~Um,~ I think the big difference between then and now is in as much as ~like~ there was, most of what we did in the old days was coming up with hacks to make things work. Now we have all these tools that can actually enable us to do things the way we want, but it also comes with a lot more added complexity.

~Um,~ and so it's, don't be overwhelmed by all of these different things. You don't need to learn, like you don't have to use nesting. It's a [00:18:00] feature. It's there. ~Uh,~ you can use it, but you don't need to use that right away. ~Um,~ and even with ~like,~ the biggest thing I get is people either tend to learn grid or Flexbox first.

~Uh,~ and then they ~sort of~ have trouble with the other one just because they're similar enough that you feel like maybe I ~kind of~ get what's going on. But then there's all these weird differences and it doesn't work the way you expect it to. ~Um,~ so you just ~sort of~ lean into one or the other. ~So, Um,~ or people that just, I know there's some resistance to grid as well, because there's a lot with grid.

You have like your line numbers, your, ~um,~ line names named, ~uh,~ areas. Then you have new units. You have, ~uh,~ the different function. You have a MinMax function, which is ~kind of~ weird. And there's like the template columns, template rows. ~There's,~ there's a lot that happens with it. ~Um,~ but whether it's Flexbox or grid,~ like.~

If you keep it really simple and just learn the very basics of it, you probably can achieve 90% of what you really need to do with it most of the time. And then it's when you get into these like edge cases, ~like,~ okay, I need to like add a little bit extra here that you can learn it. ~Um,~ but that's one thing I always liked about CSS and I think in general is [00:19:00] take it really slow.

You don't need all of the things that are available, ~um,~ even though it feels like there's so much stuff and you might feel like adding in all these cool things and doing all this stuff like. It's about making sure you understand what you're working with, ~um,~ and just learning what you need to accomplish, ~you know, as you're,~ as you're going through.

~Um,~ so whatever project you're working on, like just try and make that thing work. And don't worry about, ~you know,~ don't do this grid masterclass cuz you need to put together the simple grid. Just learn the part of the grid you need to do to make that simple grid actually work.

Do you think there's, ~um,~ value in like before embarking on any CSS endeavor? ~Um, ~Quickly doing a cursory check of the state of the language and ecosystem first, because this, I feel like is practically, it would help, ~like~ if I'm like, Hey, I wanna do a masonry layout today. ~Um,~ let's go do a quick Google.

Okay. CSS tricks. Okay. What? Whatever's Smashing Magazine. Let's see what's up. And then do it. ~Um,~ I think, yeah, I'm wondering if you think that'd be good because based on my suspicion, this is the best way to inform myself about something I may have missed in what's happening there. Okay. Do, do you, do you agree?

Yeah, a hundred percent. ~Um,~ yeah, [00:20:00] look at ~what's,~ what's going on the state, the trying, and ~I mean~ that's always the hardest thing with web dev in general, is finding things that are up to date. Cuz sometimes you'll look something up and you find, even if it's a year and a half old, it might be outdated information with the speed that things are changing at now.

~Um,~ but just trying to find up-to-date ~sort of~ like, how do I accomplish this one thing? And see, ~you know,~ what sort of advice is thrown around is probably a good idea. ~Um,~ I do know some people run into issues there cuz I've seen, ~you know,~ I have a Discord community and I, there's always questions about ~like,~ I tried this and I followed this tutorial and it's not working.

They're like, oh, ~well~ that's only working in that browser right now. So they were ~sort of ~teaching it, but yeah, it's not ready for production, so

~It's,~ it's.

possible.

It's funny you mentioned that because, ~um,~ this thing I just mentioned about the masonry layout was not, ~um,~ was not an hypothetical. I literally, uh, implemented a masonry layout, ~um,~ and I found out you can do it ~with,~ with ~grid,~ grid template rose, and there's a, it'll take masonry as a value, but you have to have an experimental feature flag on in your browser.

~Um,~ and that's been the case for, I, what was it, like three years or something? ~Um,~

This is one of my big things that's driven me nuts cuz when I, [00:21:00] there's ~um,~ anyone who's used grid, or well anyone who follows me knows I've been looking forward to Subgrid for basically ever. So Subgrids this level two of Grid allows the. Children to participate on the parents grid. ~Um,~ it's really gonna be a game changer.

We're still waiting on Chrome to implement it, but I think it was like six years ago that Firefox put it in production and then no other browser got into it. ~Um,~ now it's in Safari as well, and Chrome is actively working on it, and I think they've put an intent to ship on it. ~Um,~ but then the next level, so that's level two of the grid spec and level three was the masonry layout.

So Firefox, there, again, has supported it for, I think it's at least four or five years, and no one else has. So it's one of those things, like I could do this layout with one, ~well,~ maybe three lines of CSS and, but Intel support gets there. ~Uh,~ we have to rely on some sort of JavaScript solution,

Yeah. I'm also surprised you just mentioned that Chrome's working on it and Safari has support for it. ~This is,~ this is pretty surprising to.

~So,~ so a [00:22:00] actually, I wouldn't mind just a little detour on that because whenever I post stuff these days, browser support's always an issue on any video I post on anything. ~Um,~ even for things that are very well supported. ~Um,~ but, ~uh,~ there is a lot of comments about how safaris is the new i e. Which I think was true for a little while, but now they've really invested heavily in their team.

~Um, they,~ they put a lot, like they, they hired Jen Simmons from off from Firefox. ~Um,~ but they put, there's a lot of. They really invested a lot and it's exploded and they're actually at the forefront of most new things landing these days. ~Um,~ they were the first one to bring in the color spec they got there with, they were the first to implement has, ~uh,~ they were sub grid before Chrome.

~Um,~ and if you look at like the list of stuff, it's going on and on. So I just want to give some props to the Safari team cuz they definitely were lagging for a long time, but these days they're really pushing things. ~Um, so yeah.~

~I,~ I agree. ~I mean,~ I've been a person who wanted, ~uh,~ web push notifications for years, and Safari was the only thing that, the only reason I couldn't have it, and they shipped that to recently, so I ~fully,~ fully agree. ~Um,~ [00:23:00] man, this is so good. I'm curious, ~um,~ in your experience of writing css, which you've written extensively, ~um,~ what has there been, I'm sure there has, let me rephrase the question differently.

What has been the. Like oddest or most challenging problem you've experienced writing CSS at scale,

Oh, that's, I think, ~I mean~ that's always where CSS is ~sort of ~runs into some issues. ~Um,~ just because of the nature of how it works and how it's easy to, if you don't plan things out properly, ~uh,~ you run into problems basically. ~Um, I, I, I don't, I can't, I mean,~ the biggest issues are, ~uh,~ that I can think of just really quickly are usually some sort of specificity clashes.

~Um,~ or just like naming convention ~classes, uh,~ clashes, ~um, you know,~ if you have a few people working on the team and naming is always the hardest thing in the world. So if you end up with two people working on two different components and they think this name would work well for the thing and don't realize the other person's doing that cause they're on their own sprint over there.

~Uh,~ and then all of a sudden you have this two different things with the same class name and that doesn't work [00:24:00] out too well. ~Um, I think the, the, I mean,~ what I said before, the biggest thing is planning. There's like everybody trying to solve CSS problems in different ways. ~Um,~ with, like you said, off the top, we had, ~you know,~ from bem naming convention to, and that sort of, ~you know, BEM was,~ BEM was and still is really popular.

But it does run into that of ~like,~ I have to think of good names. And then so well, we can solve that through CSS and JS and using scope styling. And then that I've found also leads to lots of problems, ~um,~ where there's this, ~like~ everybody's doing their own thing and there's a lack of consistency and ~you know, you're not,~ you're not use, going back to what I was saying before of.

Embracing the way CSS is supposed to work, where it is like the global aspect of css. A lot of people see as a problem with it, but to me it's the biggest feature of it because it lets you write so much less code and then the less code you're writing, the more maintainable things are. ~Um,~ but then you do have the issues of.

Obviously things like naming conventions ~and,~ and running into some clashes and stuff. So it just involves a lot of planning [00:25:00] and making sure that, ~you know,~ things are handled properly from the start. ~Um,~ and a little bit, ironically, it's probably ~the, the.~ The less amount of people you have writing CSS on a project, the better it's going to work out.

Cuz when you have eight different people, even if you have really well documented how everything should be working, everyone's gonna bring their own sort of twist to things, ~uh,~ or approach, or they won't, ~you know,~ read something or they'll ~sort of~ freelance on something else and that just ~sort of,~ Causes things to go off the rails a little bit.

~Um,~ but just having ~like~ a consistent naming ~and,~ and just trying to keep things under control. Lots of planning and ~well~ documenting how things should be done, ~um,~ I think is the best approach.

Yeah, ~I, I appreciate,~ I appreciate that you mentioned, ~um,~ the issues with, ~you know,~ scoped css. Cause I feel like there's a lot of aficionados who would be listening to this going like, oh, what if you're into name clashes? ~Just,~ just scope and hash everything. ~Um,~ but ~I, I,~ I tend to agree ~that~ that is great and does work to avoid clashes, but it's like playing whack-a-mole.

Cause then another thing, another problem pops up, which is, oh, I have all this redundancy ss I'm shipping this larger bundle. ~Um,~

the amount of redundant CSS and ~like~ five people writing the same [00:26:00] code and not even realizing it is insane. ~Um,~ and part of that's just like when everybody's given their own assignment, their own little sprint and whatever, and they're not, Like that person's not aware of what the other guy's doing and you don't have,~ if,~ if you wanna do that and you wanna have scope styles, I think it's fine as long as you're also relying on some level of global css.

And there's also someone who's overviewing, like you need someone that has a big picture of what's happening. Cause if everybody's looking at the little picture, it's just, it's wild.

Yes.

The amount of redundant CSS you can get in projects.

Yeah. So in terms of trade-offs, we, we have ~like,~ just straight up css, global CSS file, no compilation. ~Um,~ some nesting maybe. The problem with that, ~that,~ that we see common ~is, is the,~ is the, ~um,~ name the selector clashes. ~Right. Um,~ similarly with, ~um,~ scope css we just identified the problems are just redundant, CSS and quite, quite a lot of code that we ship.

~Um,~ I'm curious if we could speak to the trade offs of using something like. ~Like~ SaaS because I ideally it as a build tool, ~um,~ should help prevent name flashes and also help prevent redundancy to some degree. ~Um,~ what's the [00:27:00] negative trade off with things like SaaS or less? ~Um.~

Yeah, I personally, I really like working with SaaS. ~Um,~ I'm a big fan. I've been using it for a long time, and I still think it's, even though a lot of the features of it are becoming part of Native css,~ um,~ there's still, in my opinion, especially on larger projects, ~a lot,~ a lot of benefit to it.~ Um,~ I think, ~I mean,~ it's the same type of thing where I think it's the same type of issues that you could run into with just like a global CSS type thing.

~Um,~ because at the end of the day it just compiles the regular CSS that, ~um,~ so ~like~ I, I know ~even,~ even with nesting and nestings coming to native c s s though, I think it's gonna be easier to debug issues there. ~Um,~ just cause that's what's actually in the CSS file. Cause the big complaint with nesting is always ~like,~ you see the compiled.

Selector and then you're trying to find, ~you know,~ control shift f and you're looking for that and you can't find it. Cuz someone threw an ampersand and just had ~like,~ the ending part of the class. ~Um,~ so ~like~ there's issues on that of just this massive code base that can be hard to find what you're looking for.

~Um,~ and then, yeah.

So debug ability with sas. ~I, I,~ I agree. ~I,~ I've been, ~I've,~ I've been there, and again, these are all great technologies, but I think ~we're just,~ we're just trying to identify the tradeoffs. ~Um, it,~ it [00:28:00] might make sense to choose to your CSS or SAS or scoped depending on, ~you know,~ but I feel like if we understand the tradeoffs with them, we'd be able to use them better.

And that's ~kind of~ the goal ~in,~ in a podcast like this, is to share with developers like what they can. ~Um,~ we've talked about all these solutions for CSS at scale. ~Um, Uh,~ tailwind. ~I mean, that's,~ that's the only one we haven't touched. ~Um,~ and ~so, I mean,~ so I've, I use Tailwind daily in production,~ um, and,~ and pro proudly.

~So, um,~ to the point where I know for sure that there's not gonna be naming collisions cuz it's atomic css. Flex means flex. That's it. ~Um,~ and also there's not gonna be redundancy cuz Flex means flex and only flex means flex and I will never ship another display flex ever. ~Um,~ so it solves those two. ~Um,~ but at the same time I've heard things from the community.

I don't necessarily agree that oh these class names are very unwieldy and long, ~um,~ which I personally have never had a problem with cuz~ in,~ in css I do read a bunch of rules anyway that are also long. They're just delimited by new lines. ~Um,~ so I'm curious if you could speak to Tailwind a little bit. ~Um,~ and.

And maybe share with us, ~you know,~ the positives and the trade-offs that people ought to understand so that they can better architect their applications.

~Yeah. Um,~ so at [00:29:00] first a lot of people always ask me where my tailwind content is, ~um,~ on my channel. ~Um,~ my TLDR of that is I get why people like tailwind,~ uh,~ and it's just not something I enjoy. So I don't have any plans for content on it. ~Um,~ but I a hundred percent see why people really like it. ~Uh, I,~ I've played around with it.

I've done little, ~you know, I,~ I think if you're putting together an mvp, how quickly you can work and just get something out with it is

It's like you really have a tailwind.

Yeah, exactly. ~Yeah. Um,~ so for stuff like that, a hundred percent, I think it's fantastic. ~Um,~ and I, I really get why people use it. And the other nice thing, I think one, another PE reason people like it is also ~like, It's,~ it's not a design system, but there's that idea of ~like,~ I'm not, ~you know,~ you're not worrying about like the colors so much.

Like you ~sort of~ set things up and then you have your color and it's just there and it works. ~Um,~ so for things like that, there's, so ~you're,~ you're not really thinking on that side of things as much. So it is ~sort of~ like this one level deep that's going on of like the decision making on, like a lot of that stuff is ~sort of~ done, so you're just making it work now, which I think people really like as well.

~Um,~ For me, part of the issue I have, [00:30:00] or part of the issues I've seen come up with it and for me, when beginners are using it. ~Um,~ and I think part of the problem that comes up is people are using it without a strong understanding of css, which you can't do because it's just basically a different way to author css.

Instead of making a rule where every everything's on its own line, you're just adding a class where every one of those rules. ~So,~ but what happens is people are doing, whether it's from a bootcamp or they're following courses online, where the focus isn't the front end necessarily. ~You're follow, you know,~ maybe you're doing, or even if it's, it could be like a next JS thing where you're building a blog or something, but ~like, let's just,~ let's just use Tailwind, ~um,~ and.

~It's because they don't wanna focus on, it's like~ in the old days, it would be the same thing with Bootstrap. They don't wanna focus on the css, that's not the focus of the course. Let's just come up with a solution that can work quickly and easily. But the same with those courses that were doing that with Bootstrap, where people would use it, it would ~sort of~ work, but they wouldn't be that good at css.

So the problems they run into are ~kind of ni,~ and it's the same problems I see from beginners that are writing Vanilla css. They're just writing straight CSS in a CSS file. It's the same problems. I personally just find it. [00:31:00] Five times more difficult to debug the problems, ~um,~ just because you're~ sort of~ hunting around through all of ~these, the, ~the different classes and stuff.

~But I mean,~ I just end up in my dev tools and where I see the com basically it just looks like regular compiled CSS there. So I ~sort of~ can poke around in that and find it easily enough. But, ~um,~ for me, on that side of things, it's a kind of annoying. ~Um,~ and the other thing is, While Tailwind can work really good at scale because of how quickly you can put things together and all of those benefits that you mentioned.

~Um,~ there's also the issues that can come up with just when you're making updates, depending on what the updates are. If you're updating simple, like color gets, the hue gets shifted. You don't have to basically do anything, ~um,~ depending on how you set things up ~and,~ and the color shift that's gone on. ~But you know,~ sometimes there's ~like,~ Everything, ~you know,~ if there's a bit more of a major rewrite, it can actually be a lot more work to go through ~and,~ and make some of those changes because you're going ~component to~ component to make ~like, okay, like, you know, if the, the,~ the up, there's a visual update to the design system in general.

So not like little tweaks here and there, but more of a bigger update. I find that's where if you have just like your component classes that are well set up and you can easily just go through there ~and,~ and make updates to [00:32:00] me anyway. And maybe it's just the way I like to work, ~um,~ but I find it much easier and faster ~so. Um,~ and the other thing, I know some people, whenever I ~sort of~ complain about some of this stuff, people are like, we'll just use, add, apply, ~um,~ and do it that way. And I, I can't stand that. I'm like, ~well,~ if you're gonna do that, ~just,~ just write your CSS then. But, ~um,~ and I know even, I'm pretty sure I don't wanna get most coded on this, but I'm pretty sure even Adam has said, ~um, the,~ the one, the person who created Tailwind or was behind it, ~um,~ has said that ADLY might not have been the best idea in the world.

~Yeah. Um, okay,~ so we've covered a lot of different ways of writing really good css, I think at scale, ~um,~ depending on how people like to work. And some people like, like you said, ~some people like to work to,~ some people like to work with Tailwind and, ~um, you know,~ if it works for them. I'm curious what works, ~um,~ for you, ~uh,~ what is your CSS protocol?

What do you reach for? Do you reach for Bem or scoped or SaaS or some mix of all of them? How do you go about this?

Yeah, so I, the mix of all of them is basically what it is for me. ~Um,~ and like I said, there's a lot of really good things in Tailwind and I get why people like it. ~Um,~ but for me it's ~like,~ it's an extreme level in one direction. ~Um,~ whereas Bem, I think is the exact [00:33:00] opposite extreme in the other direction.

~Uh,~ I was a very big bem person. I loved it. And then you ~sort of~ start going, ~well,~ okay, but I don't need like a class name for everything. Like I, a utility class for this would work really well instead of have ~like, You know,~ I'm using the same style in eight different places. Let's just use the utility for that instead.

And so I've gotten really big into having utility classes for my font sizes, my colors, background colors, ~um, you know,~ text Alliance Center. And I have a big group set of utility classes basically that I use. ~Um,~ and then just how mine is a bit of a mishmash of everything. ~Um, I,~ I still use, I mentioned before, I really like SaaS, so I use SaaS to generate all my utility classes.

So I have maps for my colors that then get generated into utility classes. ~Um,~ I have that for my sizing as well. So ~like, you know,~ the same way in Tailwind, you have your different spacing. I have the same thing there. So all of that gets generated. ~Um,~ and then so from just based on that I can quickly work.

I then have just some generic layout stuff that I just found myself using in every project. So I have ~like~ a [00:34:00] simple grid and I have a simple flex stuff that just happens all the time. ~So, ~So for all of that. And then when I, ~you know,~ once I get past ~like~ three to four utility classes on something, I~ sort of~ go, ~uh,~ I guess that could be a component.

So every time I need to use that type of thing, I just have a single class I can use instead of having to ~like~ put over and over and, ~you know,~ repeating the same. Five utility classes on something, I can just be like, ~well~ now I have this component instead. ~Uh,~ so it's a single class, or I have been, ~um,~ using Astro and, ~uh,~ playing with felt kit a bit.

So maybe you just have a component itself, which then if you're using just utility classes, it's fine.~ Um,~ Yeah. ~So,~ and when I'm making more class based or more component things that I'm using class names on those, I ~sort of~ follow ~the,~ the bam approach on that. So it's this weird mishmash of sort of bam with SaaS and these utility classes layered on top to try and I think pick the best out of both worlds.

~Uh,~ and landing somewhere in the middle.

Wow, that's, ~uh,~ so what I'm hearing is the best way to go about CSS for the vast majority of people is to [00:35:00] understand. The language ~and,~ and manage expectations of the language, understand the browser, what it gives you, and understand concepts like Bem, sas, scoped tailwind deeply, ~um,~ just as a way of being informed.

And then once you understand that the mechanism behind all of these things, ~you,~ you have all of these like weapons and your arsenal to pick and choose. And like you said, you use SAS to generate some utility classes, use a bit of, ~um,~ Raw Cs or like just straight up CS, global CSS for other things that you're able to, then you have more power the more you ~kind of~ understand various things ~and,~ and ~that,~ that indeed seems to be the best way.

~Awesome. Kevin, thank you. Um,~

~I, I will, I,~ I will just say really quickly, I don't know if it's the best way, it's the best way for me. ~Um,~ but I do think, like you said, the underlying knowledge and just really understanding things well is the best. And then just using what you're comfortable with and just understanding the tradeoffs of whatever you're using.

Cuz no matter what you do, there's trade offs and just knowing like what's the strengths, what's the weaknesses? ~Um,~ cuz there's, I don't think there's a right way. I think there's, everybody has a right way. ~Um,~ and just make the compromises you need to make. ~Um,~ but understanding how everything works is definitely ~the,~ the most important part.

I also [00:36:00] wish on another note that bootcamps would like actually include prob like real problems as opposed to~ like,~ okay, here, ~you know,~ the basics. Goodbye. ~Um,~ because I feel like that would also just turn out a lot more. ~Um,~ bang for people's buck. Anyway, ~on,~ on that note, Kevin, it's been an absolute pleasure.

Thank you for making the time to chat with us. ~Um,~ I know you've got courses. ~Um, ~honestly, I would actually love to either take them myself or recommend them to people that is beyond css.dev. ~Is~ is your course, and there's also, I think, on your website, Kevin powell.co/courses. We'll put these in the show notes.

~Um,~ that's where people can go. I know you have a Twitch channel. You've got YouTube here. Man, you're everywhere. ~Um,~ so I'd invite anyone listening to go check those out again. There should be links in the show notes. Kevin, any closing thoughts for this episode?

Yeah, I think, ~um,~ just. If you're coming to CSS and you are frustrated, just try and ~like~ go, okay, come in with a fresh mind. Come in slowly. Keep it as simple as you possibly can, ~uh, ~and just realize it is going to be different. And I think if you do that ~and,~ and you try, ~you know,~ I think you can enjoy css even if it's something that's frustrated you for a long time or you feel like it [00:37:00] just doesn't make any sense or whatever it is.

~Uh,~ it's a fantastic language. ~Uh,~ maybe it's not for everybody very possible. ~Um,~ but. I think that even if you can't really enjoy it, I think that definitely go over the fundamentals a little bit that maybe you skimmed over early on.~ Uh,~ and it'll ~really,~ really help out and you can at least be a little bit less frustrated while you're writing it.

Fantastic. Kevin Powell, thank you so much again for making time to be on the podcast today. Appreciate

Yeah. Thank you so much.