 think we're live. We'll find out in a second. The chat will let me know, I'm sure. There's probably, there's usually a bit of a delay. We'll find out soon. Oh, is the check gonna pop into here? No, it won't actually, but I'll keep an eye on it. That's the one thing is I know now. Hi everybody, first of all, I think we're here. Yeah, I'm trying something new, so I'm trying to figure out the best way to do all of this. But yeah, there we go. It is working. Let me know if the audio levels are good as well. In the chat, everything sounds good on my end, but I don't know. So we'll find out there. And you're gonna be talking about CSS naming and just naming in general, I guess. This won't just apply to CSS, though it will have a big, a big role there. But yeah, I'm just trying to figure out the best way to do the chat because I have to pop it out. It'd be cool if it was inside of Riverside here. I'm popping it open too, and I'm going to mute the video so we don't get into it. Yes, yeah. And then I was also like, I could now, I can use this to also stream on Twitch as well. But then I'm like, I don't want to, I know there's apps that you can have like, all the chats are consolidated. I think StreamYard does that, and I'm like, so should I be using them? I don't know what the best solution is. It's just like real life trying to make decisions about front end tech. You're like, what do I do? It's all trade-offs everywhere. Yeah. Yeah. It's like, why can't one of you guys just get it all right? Make my life easier. Then we'd be happy. Once everything was all like, if there was just one front end framework, we'd all be happy, right? No, I think that's part of the charm of it. We like it's never ending. Some people are negative about it. They're like, it creates jobs. Well, it does, but yeah. That's true. Just really low. How about now? I don't know. That sounds good. That got louder for me. Oh, cool. Adam is low. Oh, I didn't see that, but we'll see how that is. Unless this is an emotional comment. They're used to you having more energy. Or I could just sink low into here. So yeah, just really fast because I'm assuming most people that are here know me and hopefully most people that are here also know Adam. But just in case you don't, I was going to pull up your Twitter profile to read what you have there because I like it and I typed the wrong thing into search as I was saying that. I was looking up your Twitter and wrote Twitter into the Twitter search because I was thinking it's hard to speak and write at the same time. Oh, it's not even here. I was thinking of your website maybe. But Adam works as a devra like Google Chrome. You're also on the CSS working group and you just like to let people know how great CSS is in general and nerd out on it. He has the CSS podcast, which is absolutely amazing with a wonderful co-host with who now. And yeah, what else? Is there anything else that I missed there? It's all fan fairy stuff. I'm a friend and friend. You know, this shirt actually is one of my new ones that I thought you might appreciate. I do. Yeah. I got the grid one, a color space one, and just a CSS one. And then some people like, where's the Flexbox one? I'm like, fair enough. I probably if I have a grid shirt, I guess I should have a Flexbox one to go along with it. I like your merch store. I saw it popped up and I was like, ooh, CSS goodies. I'm a nerd for this stuff. I worked with Christopher who did the state of CSS merch stuff, the logo and their shirts. And I was like, oh, he loves CSS. And that's probably the right person to get designing something. So yeah, he did a great job. But we're not here to talk about that. We're here to talk about the state of naming stuff today. We're going to be talking about sort of, you know, CSS naming is hard. And actually this whole thing came up because I sort of talked to Adam a bit earlier, probably late last year about coming on a bit more often. And I asked him if there was anything he wanted to talk about. And he said that he saw one of my videos and he was hoping that it would be about something else. It was the one where I'm like, don't use wrappers or containers like this. And he's like, I was hoping you would just say like, don't use that name because it's terrible. And he's like, the content was good, but we should have just dropped that completely. So yeah, we're going to, I guess maybe starting with that idea of a little bit of, or I guess maybe before we even get into like, this is what we should name things. Do you have any thoughts on why naming is hard or why we're bad at it? Yeah, I reflect back to being in school and I was like, my teachers wrote wrapper in my lessons. You know, it wasn't even like a concept where they sat down like, you should, this is a skill, you know, it's a skill in front end is knowing how designers get the same flack. They just show up with their file and all the names of their groups or whatever they want them to be. And they don't really get taught how to name the intent of these things. There's like, there's also competition. I was like, writing down some of the notes preparing just like a little bit ago. And I was like, we're like generic names. We have abstract names. And then we have utility names. And I think what we're trying to do here is like, measure the difference between a generic name and an abstract name. Like the generic name is kind of the problem where it's like wrapper doesn't really tell me much. Whereas an abstract name would at least allude to what it's trying to wrap. You know, like, is this wrapping? What's it wrapping? I don't even know when I, and then I loved the internal monologue where I battled with myself like, well, I named it wrapper because it's a wrapper. And if you want to know what it's wrapping for, go look at the CSS. All the answers are there. I'm like, that's not good enough. So anyway, and like Bootstrap also had brought in the container names. I feel like from school to libraries to just habits that we formed over time and the lack of education, the skill of naming a wrapping container because it's so popular. And it is, and it is what you need. You're like, I need something to wrap stuff. It's very common to have that need. So it's like, we're naming off of need instead of purpose. And we don't have the skills. And so we're choosing generic over abstract and all of this stuff mixed together and to create the problem. What we're going to talk about today. That's actually, it's funny that you just talking about wrapper and container and that because when I was teaching in the classroom, it was a little bit of the same thing of just like, I did say this is what, you know, everybody uses. So this is what we're going to use to just because it's sort of become a convention to a certain extent. I think Bootstrap really hammered that home. The dot container was just became ubiquitous pretty much. And then for me, I was just using it all the time. And then container queries became a thing. And I was like, well, I might want a container utility class. But then that's awkward because I have dot container. So I guess my container is going to be for container utility class on something if I need it. And then I can have a wrapper instead. And yeah, so definitely and then but then that's confusing because if somebody's used to seeing container for being a container and the container is part of your code base, but then it does what you're not expecting it to do that just gets really weird right there as well. So yeah, it's definitely a difficult thing. The other thing you did mention to me was that, you know, a lot of the things we see in CSS wouldn't pass as a JavaScript function. If it was going through a code review, you put in that whole request, and you have a function function where it does stuff. Yeah, the do stuff function, you're like, that's not going to work. We're going to rename this right now. So do you feel that there's more pressure on that side of things to actually name things better than our class naming? 100%. It's an important choice as a JavaScript author to name your variables and to name your functions. You want the code to be descriptive. It's like leaving a little bit of a breadcrumb behind without a comment. A well named function can be as good or better than a comment. And that's why some people I've seen it in the past prefer long function names, you know, we're like there's this innate desire to make a short function name, but that's for the obfuscators. You know, let it just change that long function name into the letter C. It's all good. And so it's like, okay, we're sitting down. There's also two long of names where it's like fetch the results and munch it into this other thing. You're like, ah, that's multiple functions in one function name, Adam, you got a refactor. And it's like so obvious in a script review, and in your JavaScript, it's so obvious, but in our styles, somehow we're all just totally chill with variable names called variable. And I mean that in like container being a container. Yeah. So so funny, the duality and the like why it's okay in one space and not in the other. And if anyone follows me on Twitter, you know that I love looking at things that we do in JavaScript that are normal and stuff we do in CSS. It's like shunned. And I'm like, what? And naming is a fun one where we seem to obsess over naming a JavaScript. We take pride in it. We have code reviews about it. But in CSS, we don't. I don't know why. Yeah, that's a good question. I'm hoping that you shed some light on it for me because a lot of the time I'm sitting there and I'm planning a demo out and I'm looking at something or it's something like for a bigger project or something for, you know, I'm trying to teach. And as I'm preparing it, I'm staring at it going, I have no idea what to call this. And I'm like, I don't want to have a bad name here. And I've done it where it's like, you know, if I'm just doing one of those demos that's just like it's just a bunch of colored boxes or something because it's easy to show something I don't feel so bad. And I'm like, just use a better class name here when you're doing it because you'll have you'll have context. Whereas here we're sort of out of context. I can get away with this in demo land. But you know, when I'm doing something a bit more real world, I'm like, man, this is this is tricky sometimes. So hopefully I'm hoping that you can give me a few ideas along the way here too. I know you prepared some stuff and I've prepared some stuff. I don't know what you want to start with. I kind of brought up another good point that I had written a note about just 10 minutes ago, which is it's I think it's harder in CSS than JavaScript, because things adapt in a media query. So maybe it means one thing at a small viewport, and it meets something else at a large viewport. JavaScript doesn't have that problem. JavaScript is very, very much more definitive in like this function just does that thing. It doesn't have to live unless you have server and client, which I guess you've got like those concepts where you're like, where's this executing? But even then it's not nearly as wiggly as a class name in CSS. And so that's I have a one of my notes here is like, every time you write the word wrapper container, you just call it the wiggler. Because that's really what you're trying to say is this thing is wiggly. It's going to be it's going to be this at this viewport size. So that's that's all my advice I have so far. Yeah, I like that one. A good first one for us to attack, though, is we did this together. We used the container class a couple years ago when we first had like an open props one. I shared it in the chat. Where should I share this to you? This link to this code pen? I have there's a chat here or you can just do it in the YouTube chat. It's up to you. I'll do it in the YouTube chat again. And so this is like our first task here is to look at this container class and just talk about how we could do it better. Oh, you know what YouTube might not be letting it in because it's a link because I didn't see it there. Share it to you directly and then I can share it to everybody and I can share it on screen. Boom, there you go. Whoops, the wiggler. Does anyone watch Adventure Time? Remember the wiggler episode? Or the jiggler? That was the jiggler. Dang it. That was a good one. Here, let me get this a bit bigger and I'll share my screen so everybody can see what we're talking about. I want to be this one. Oh, man. Actually, I should do that whole window because I'm going to have other tabs that I'm going to want to show. But I want to make sure it's this one here. Okay, there we go. Hopefully everybody can see it. And there we go. Cool. Oh, yeah. I remember this one. So that was our side scrolling that had the little jiggle on there and we worked out doing that going on there and right there we have the container. The container. And I was like, oh, this is perfect for us. We can fix our own past self mistakes. Nice. Cool. Yeah, that is a good point. And this is definitely, you know, it's acting as a container because it's holding everything. Let's go see if it's in here. Do we have it? There it is. Display grid. And so in this case, it's not, we didn't even really use it as sort of the traditional container that you'd normally see in the sense that often on, you know, that's say has a max width on it or something like that. But otherwise, it's doing what it says it does. It's containing the content. Right. And that's at the end of the day, what you need. It is that particular two sets of styles you have their display grid with a gap. I've naively and just kind of a joke, given that a class name of just for gap, because it's really common that I'll have a layout where all I want is gap in between the items. Yep. And it's like, well, I guess I have to display grid it so they kind of come together and I'll make a class name called just for gap. I don't think that's what we should name this. But this one feels like we could choose an element. So like this is one thought process I had coming into the sync today is when a thing is called a container, that's often what like a section or an article are often in our minds. And so it's maybe an element can replace the concept of which also comes into custom elements. And I don't mean web components. But like container queries, I like to use a like a node that that's all it does. And I do like contain dash or that way it's like, it's a, it's basically a div with a slightly special name that I know will have a container name on it and a contain like inline size or something on it. So like maybe this one qualifies is this could be main. So instead of it being container, we can call it main, call it a section. It could also be this looks like a carousel section. So again, we can give it a name that's sort of representative of like what it's containing. Maybe. I guess actually, I just really fast on since we're talking about naming stuff are what do you think about if you have things like, oops, I did do the right thing. Sorry. If you did a section with a class name or versus just having, you know, or would it be your section carousel or, you know, what if this was, and I guess part of it is part, I know people don't like this specificity. I put a main and it seemed to have lost. Oh, no, it's there. Okay. So this would be section class is equal to and, you know, it's not really the carousel itself or the entire scroller because it has the heading in there as well. But I guess it is that section. And that's just the title of it. And then that's the component itself that does the thing, which is, I think maybe that's also in a way why, you know, we mentioned with JavaScript that there's more wiggly and stuff. The other thing with CSS is like, there's so much context that comes in, whereas like ideally in JavaScript, the context doesn't matter because that thing should be isolated enough that you could just use it anywhere where in a way CSS we sort of want that, but it's still, there's always a context that something's living in and you can't, you know, and it's something I do want to talk about a little bit later was sort of the idea of layouts versus components and stuff like that. But we don't really have a way to like define that necessarily. But yeah, I guess what my main question was, you know, carousel, are you or I guess what's your thinking on doing something like that where I have a section of carousel and then maybe just being explicit and forcing people to use the section if they want that to get the right styling on it and stuff or would you just be, you know, this is a carousel that is a section or would you be the carousel section or, you know, which way would you be leaning? Excellent question. And I love the tension you bring up where like a JavaScript, a tensions, I love tensions like where the gray, gray things, I'm like, I love gray, black and white stuff's boring, gray is way more interesting. And yeah, JavaScript, you might name the component, it might be in a file name something yet there's dot container at the top of it, you're like this, you kind of just use the component name, but then you're like, the name of the component is not the same thing as the class name. And versus the same thing as the element name here. This my answer to your actual question, though, other than just I loved your tension presentation. Is this like a design system question? Is this like a team, a team management or a team question? In how are you using elements? Our elements, most design systems elements are not part of the equation. And most of the things I make I like my sections to be a display grid, I like my articles to be a display grid and just like gap is innate in those. And so I might opt for that in a design system, but then other times people want to be very explicit. So all the elements are very naked by default. They have no styles, they're unstyled. And you bring something to the table other than the semantics with the class name. And I could see that being a very extensible way to like delineate the purpose of a tag versus a class name. So maybe, yeah, maybe I would opt for the latter, I would say section doc carousel, but I wouldn't bake it into my selector. So I'd make you author it that way. I don't know, what do you feel? I agree that it's tricky. I think that part of it, like I do think there's use if it's a like, you know, I'm not a big fan of styling my H1, my H2, my H3, because I don't want people using those elements to visually represent something because sometimes you want your H3 to look like an H2 or things like that. So I think that separation is really good. I have gotten lately into having selectors that sort of force accessibility. So I'll be hooking into like the area roles or, you know, area roles or area attributes, just to be like, you know, like page current, what is it, area, current equals page or page equals current or whatever it is to highlight the active page instead of having a class on there. That makes sense to me. And then, but at the same time, then when it comes, I guess it depends is the usual answer, you know, like is something, is this thing always going to be an article? And if you don't do it as an article, you're kind of doing it wrong, then maybe you should enforce it just as a sort of failsafe that somebody's actually going to implement it properly. But I don't, I don't currently do that. So yeah, I would personally like this is what I would, what I have up now is probably how I would approach it. But it is one of those things that I'm always sort of thinking about a little bit these days of like, because I know there's always the pushback against the idea of, you know, you, we want flat specificity for everything. And it should just be a single class on everything. And I'm like, does it though? You know, and that leads to there's reasons that became a thing over time. And I do see it as a little that whole idea is a little bit of, let's put the training wheels on when we're learning early on, because then you do, you know, we let's not worry about specificity because you're learning 700 things at once. So let's just remove that from the equation because it makes everybody's life easier. And it's like, at one point, maybe we could take those training wheels off and explore a little bit to make, you know, you can do good stuff when you're not just doing single class selectors on everything. Yep. And it's hard to come up with one name for something that's so wiggly. This is a good one. I think section class equals carousel. This feels right because if this was in a CMS, you could have an area called carousel, it's going to need a header, you know, that nested inside of there is a horizontal scroller of items, which could be specified. So JavaScript could create and consume this and encapsulate this very well, fetching data, representing it. Nice. It feels like we solved this one. I don't know. Awesome. Sounds good. Our first success from Dr. Taylor's section class equals carousel. That is the sort of education I wish I had gotten in school. Yeah. And I did not. I got a question from the chat, actually. That's a good question. That's going to sidetrack us a little bit probably. Would using CSS layers impact how you name things? I love layers. Yes. Here's how it's impacted me, is that my class names are much shorter now because they feel siloed. I feel less about a global pollution concept because I have layers. Even though the names do have global implications, I don't have to worry about them as much. Cool. What a great question. What about you? Has layers changed the way you've named things? I've only recently started using them more, so I'm not 100% sure yet. I put them off for a while just because I knew Browse was where it wasn't amazing. It's getting to the point now where I'm like, you know what, I think I'm okay. But I've been using them in the most boring possible way. I'm looking forward to other smart people showing me the way right now. Some of the good ideas you can do with it. I think a good tip is that here's a couple fun tips with layers. One of them is you might have made a class that had a prefix in it, very BEM-like, but maybe not even being BEM, but you prefix it with component or some sort of namespace, and then dash whatever it is you actually meant to write or say about that's descriptive of the component. That can be in the layer now. The layer could be called components or it could be called whatever that prefix is, and then inside of there is just the class name. That way, when you go inspect the styles, when you're reading the styles, you can see that this class name inside of components. It's like a little bit of a comment, a little bit of a breadcrumb, as well as an organizational thing, all coming through from your layers. That's kind of nice. That's why it makes the name smaller is because you can nest your layers even and leave those hints out of the class name and put them into the layer, which is kind of fun. Awesome. Since we're talking, are we we're doing containers? I had this one as a demo that I did. I just left it as placeholder. So we can come up with something better. I have a few of these that we're going to run through and you probably have some other examples too, but we just sort of did one container. So we'll do this typically is sort of the type of thing you see a container for without the border. I just put that on. And actually, this is what I've been using my layers for a lot is at the bottom of code pens just to throw everything else. That's my main use case. That's one of my favorite ones. It's like, focus here. The rest is noise. Yeah. So yeah, the max width margin left margin right of auto that just sort of holds your content but stops it from getting too big. That's sort of that, you know, the bootstrap would call that a container. Other people call it wrappers. I don't have a better name for it, which is why I just stuck with using wrapper because it sort of wraps your content. But in a sense is, you know, even saying it wraps your content, it doesn't really tell you what it's doing. It's just saying that I'm going around all of your content, I guess with that name. Yeah. So do you have any thoughts on that? Yeah. Although it's just so funny, even I just child mentality hearing rapper. I'm just always want to, I don't know, just think of cube 93 like a local radio station, just like just rapping. I'm just like, I just want a little meme to show up almost like the raptor. Oh, what if there's a raptor, but as a W and it's just like, kid brain. I can't shake it. But when I'm looking at this particular solution, I do the same one all the time. And to me, I immediately need this to be somehow content related, because what you're doing is containing sheep. You're being, this is a defensive CSS container in that it's intent is to not let lines wrap longer than your eyes are healthy in in reading. And it's also centering it. So how do we give the sense of content, legibility, and, and horizontal centering in a name? Again, this is where we've been really nice in school if they had an easy answer for this, because it's so common. But I don't know, centered content. That's a little too, okay, that doesn't play nice when it goes into mobile view, because then it's just content. It's no longer centered, and it's not even max width contained, right? I guess we do usually have the, you know, padding in line of, I don't know, one ram or two rammer in there too, right? Because we don't want it to touch the sides of the page. Is that not working? This is one thing with CodePen that drives me nuts, is they have some of the logical properties where the syntax highlighting is fine with it. And then other ones are like, why is it doing that? But it's also, let me just turn off my border. Oh, it is working. It's on the inside of the border. There we go. Kevin, you should know the box model by now. Oh, so should I. One of my favorite ones is, and I still can't read, I don't know how many times I've tweeted just like, where's the scroll bar go? Is it consume the margin of the padding? And I'm like, oh, can I remember that? It's like Ace Ventura saying, is it the red or the white? I'm like, I don't know. That's Ace Ventura clam chowder joke? Jeez, that's probably 25 years old at this point. Yeah. I think that's why I've always continued to use container or wrapper of just being like, it's not super great, but it's the best I've got because I don't really know how to describe exactly what it's doing. So this one is, it's a wrapper specifically made for content, although is it? Maybe not. 980 or 900 pixels there is not a content-centric intrinsic value, which is 60 characters would be. You're also not targeting the paragraphs. So again, you've made a sheep pen or you're containing the wildness of the sheep in a defensive strategy with conditional centering only when needed. Yeah, what is a good name for this one? Someone's in the chats because we're rounding up the sheep that we should call it Dot Border Collie. Nice. Yeah, a little shepherd dog there. Yeah, just do the emoji there. Yeah, emoji class names. There you go. What is it doing? It's hurting all of the content. All right, move on to the next one. That's a new education. It's like a metaphor for we are, oh, God, it's so annoying. We're containing stuff. Yeah, but we're not just containing it. We are... Yeah, we're controlling the layout to a certain extent. We're preventing a max width, but then that's sort of an awkward way to phrase it. Yeah, I want to write legibility in there somehow because it is oriented towards human consumption. It's an I and a re... It's a UX. This is a class with UX purpose. This isn't just paint. This is down to so... I'm seeing if anybody has any other suggestions. Maybe we'll circle back to this one once we've gotten some others down. So, but this is also painting a lot of the problem of why people don't like naming things in CSS is because this moment is hard. It's the same reason designers don't name their containers. But again, I love the tension that people will sit down and spend the time to name their JavaScript functions. It's just as wiggly and hard in a lot of ways. What is a good one for this? It needs more context. Yeah. Like, where would this be? Like, if this was on the home page, it would be a like a block of about me or something like that. If this was a product description, this could be a description block. That would be one sec. I have this one. I'm going to open it off screen for a sec to make sure I have the right one. In closure. That's funny. That's just as bad as wrapper. It's a whole lot of synonyms, but not a lot of... Here, I'm going to pull this up. Just because this is an actual layout. This is from Dribble. I'll put it in here. Just because on something like this, where... Right. I think this is why we try and have a name that doesn't have the context dependent necessarily because I'd probably use a wrapper here or maybe you could have one through those two sections that are here, depending on how we're working or we have one for there or there, but then here, we have a dark background. We still need it around that. So you have the background and then you have your container inside there, then here, and you don't want it to necessarily be context dependent for each one of those and have to have four of them because that's the whole point of using a class, right? Even though it looks like the one at the top is different because it's a little bit wider up in the navigation, but... Yeah. So like something like this, I guess, if we're just to try and put it into some context of an actual layout and we're just doing something to hold things from getting too wide. Yeah. So let's see. It's... It's funny. It reminds me of two other names that get used a lot that are bad, which is block and box. They're also not descriptive of what's going on. These are like little mini pages. They're almost like a... When they have a figure and a fig caption, they're feeling like a figure, but when it's more generic than that, you have your alternating one, which is a good one too. So you get like an alternating version that would flip the order there. Oh yeah, like there and there. Yeah. And again, you've got like this concept of like the one for the whole page. So in the column there, it could be column related. You could just sort of say it's a large column. Large column. It's true. And you know one thing I've actually... I think it was in that video that you'd even mentioned where I sort of was saying just to have almost like a primary layout or something. It wouldn't necessarily work here, but this is such a generic example. But like now that I'm using... I've sort of ensued using something like that and I'm just setting up a grid that sort of handles that main layout of my page and my content. There's a grid section that holds my content where I need it to be. And then if I need something wider, I can get it onto that other grid area that's a little bit wider. And like it sort of solved for me, solved that problem of like, I don't need a wrapper or a container because I have a primary layout that I use on all and then I could have an alternate layout or a sidebar. You know, you just... And I think that does a better job of describing the purpose of what we're... You know, your primary layout is probably the main layout or maybe you can come up with a different name for it depending. But just saying like this or primary grid or whatever it is, something that's sort of... This is controlling my layout I think is a nice thing. A good follow-up question for that because I like that thought process was that a lot of times these wrappers and containers are creating a context in a CSS way. Like it can be an overflow context. It could be a directionality context. Like is this block or inline? Is this a grid or a flex? And so I'm wondering how much of that underlying implementation detail should be exposed in the name here. Like we're calling it a column, but we obviously... Well, in this case, we didn't use grid or flex. So should we have called it a grid column or do we... I don't know. And what if we change it to be flex when it's in a mobile view and we go to grid when it's in another one so then it becomes even more wiggly. But at least columns sort of like persists through that. This is just like in the CSS working group coming up with names for things where like you do... You need something that's like descriptive enough but not too weird that can stand the test of time. And this is just hard work. Can AI name these things? Is AI good at naming? That would be a good question. Actually, I did... I was having trouble with something. It was stupid syntax error I had in some JavaScript I was writing. So I asked AI to fix it and it also without even mentioning it, but it changed the name of like two of the functions and they were much better names. And I was like, oh, that was good. Thank you. Making other views easier. I'm down with that. But I have a feeling that AI would just suggest container just because it's everywhere. That's the feeling I would get. And I think that's why our teachers didn't teach us this one because they just said use that and it works because that's what they knew and they didn't want to think about it either. Dynamic... So we have not too wide just right. We have dynamic container wide with margin. Overflow container. Centered article, full. Centered article. That is similar to something I saw. Centered content. Or it could just even be centered content maybe. Maybe that's what you said. I guess my one thing that I always think of whenever I see centered is just like a text aligned center. So that's my only thing there where I'm like, I'm not sure. Are people going to interpret that? So many ways to center in CSS. Yeah. I guess, yeah. And then centered content people might start thinking that's going to center. Place items, place content. Oh, which one? Main column. Oh, that's not bad. Main column. Oh, who said that one? That was Main column. That's actually, I kind of like that name. It's just your main column that runs down the middle of the site and holds your content. It doesn't even technically have to have the margin in line of auto. You could take that off. There's some sites that are left aligned still these days. And it would still be doing that exact same job. That's not a bad name. It's hard too because it's like there's a temptation to add a size in there. Like you could have dot column and then with these variants with nesting, you could say like and dot large and dot small. But then you're kind of getting into this concept of like, it's not large or small when you're on mobile. It's like it's only descriptive of your desktop authoring experience and not of the reality of where it needs to live over time. Yeah, that's true. Because I do that. I usually have like extra large, large and different things. It's sort of defining the maximum with it. But like you said, if somebody were looking at that and had their, you know, they're checking it on mobile and they all look exactly the same. They're like, I don't get why we have four of those. There's a prop in OpenProps. They're called content props. And there's one at 20 characters. 40 characters is 60. I don't know. Anyway, there's three sizes of content. For me, when I'm looking at a website and like you pulled up the layout earlier, there's like little, little small text blocks. And that would be a size content one being the like the smallest one. And then two, and then three, three being the largest one. So like I would set max width to bar size content three being like, I never want my content that I intend for people to read. I like the word content also because I want people to consume it. And so content is always like informing someone of that idea that this is meant to be read by humans. And then yeah, but then it doesn't change the name. So you still have to have a name that's encapsulating the intent of the values that you pass. Yeah. So one mark boots in the chat did suggest and this sort of comes around to something I wanted to talk to you about, which I mentioned to you earlier, which is tailwind, because it makes me think of that because he said why don't we just call it main was it inline auto, which is descriptive of what it's doing, assuming you're not describing the width. So say we just had, you know, you do something like that with a main inline auto, which that's all it's doing, which is much easier to describe. And then you have like you said, you have like an open props, you have that as well, where you have something you have something else that's setting the maximum size on it. So then, you know, a lot, you know, max, max width, 900 pixels, let's just say, whatever, 900. It's terrible. I wouldn't do it like that. But you'd have, you know, you probably have something here that's actually going to be, if I was doing this anyway, I'd probably just have my max width as like bar. Actually, I was just going to say I'd probably have a custom property somewhere at the top that's set for this specifically. But then that runs into what do I call, you know, the content max width again, like we run into that same problem again. So like, why not just call this then content max width or whatever, and then just set it. But you know, combined, instead of having a single class name in a way, maybe it makes sense to have to separate the concerns a little bit of. I agree. And this is getting towards what would likely happen in a code review and JavaScript, you have a function that's grabbing and reaching and has its effects are too far. So you break it up into smaller pieces. But just like in JavaScript, you can break things into two smaller pieces. You don't see people building purely functional applications in all in the purely functional way where everything is a tiny little function, because it's nuts to try to follow what's going on inside of that code. But I could see like a .content class nested inside of there is a and .lg and inside of there would be the size that's kind of getting applied. And then there's like a default. So like content should always be like size two. And then you've only got smaller large. That way you're kind of got your variance baked into the class. And yeah, you'd have two individually responsible concepts. One is a main inline auto concept and a content concept, which is good. I think thinking about content versus centering is a healthy delineation to make there. So cool. Cool. Yeah, I like that. That idea actually, it does lead a little bit. I'd seen some comments and I didn't bring them up right away, just because I knew we'd get around to it. But that idea and you sort of alluded to a little bit of my own thoughts on it. But, you know, if we are separating concerns more and more, that sort of does lead to eventually lots of utility classes and potentially what you know, to what people were saying of if you use tailwind, then you don't have to worry about naming things necessarily, which is one of whenever I mentioned not using tailwind or being, you know, the reasons I don't use it. That's one of the things the benefits people mentioned to me is that well, then at least I don't have to worry about naming stuff. So I have my thoughts, but I'll let you, you know, before I share mine, I'm curious what you think. Yeah, with tailwind. Yeah. It's got some really great tradeoffs. I'm generally weary of things that are overly prescriptive and that promise to solve everything. And so that's sort of like, I live at the very edge of CSS. And so A, I can't wait for it to come out, or B, I don't want to use the new syntax through the new variant creation concept, where it'll just in time create a class for me based on my weird little thing. Like, there's, there's, if I showed up and I did that and I named a class for all the weird little CSS stuff I needed to do, you'd probably call it smelly. But for some reason, if we do it in tailwind, everyone's like, that's genius. And so for one side of it, it's that one thing will never solve everything. Except for some reason, CSS is unchallenged at this point. Tailwind just being a strategy on top of CSS. It's not a replacement. I don't mind naming things. I like having these debates in my CSS just as much as I like to having them in my databases. And I like having them in my JavaScript and in my HTML. I like being concerned with the naming of things. And again, I'd also look at someone who's like, you don't have to name anything. I'm like, you named everything else in your entire project. You named every file. You named every folder. You named every variable. You named every function. Why doth thou hate this, the CSS class name? And I just feel like, come on, like, why are you drawing the weird line right here? I think the weird line is because it's hard. They never had education. It's a skill issue. That's what I was hoping we would do in this video today is like, improve the skill, which obviously none of us are very good at. Even you and me sitting here, we do this stuff all day. This is a hard skill to cultivate and you have to care about it and focus on it or else it'll never get better. Just like your JavaScript, if you never focused on it, you never would make it better. Your database names would all be terrible and someone would show up. There's no Tailwind for database column names. Anyway, so that's part of how I feel about Tailwind. There's a lot of cool features to Tailwind. I kind of liked a better Tailwind two than three because Tailwind two was easier for beginners. There was not an intense tool chain. I attended these days like not like tool chains because after six months or a year or two years, they don't age well. They also don't teach well when you have to sit down unless it's completely baked into the framework, which at that point, if you want to customize it, then you get into pain land. And I just don't, I don't like fiddling with the intricacies of build systems as much anymore. And so when I don't have that, I don't have to deal with that. I like getting as close to the minimal concept I can teach you as possible. I also don't like learning microsyntaxes. It's the same as like CSS has multiple microsyntaxes. One of them is that AN plus B. I don't know how much I'm going to rant about this. Anyway, there's a lot of reasons I don't use it. Although I'll use it with you. Like if there was a big project and we're all agreeing on it and we don't have enough time to document our own internal names that we like to create for things, then I'll do that. But at the same time, I'll laugh every time I go write, you know, PX4, but I'll also use the named component and the named functions and the name and everything else that we named internally together. But for some reason, we drew the line at this class names. I just, it's just so silly to me in some ways, but there are a lot of gains from an atomic style sheet. So working towards that using them is very healthy. I think there's just a mix. There's a mix somewhere to be found between utilities. Just like, just like in, you're not going to be surprised by my answer, JavaScript, you pull in utilities, you got your low dashes, you got all these different things that named portions of your application for you. But it's still on you to finish the job. And I think CSS is in the same boat. You can't just go grab low dash off the shelf and build an entire app. There's glue code that happens. There's mortar between your bricks. And CSS is very good at being flexible as those bricks move around because this is a very wiggly target. Sorry for taking so much time. Don't apologize. Yeah. But you brought up one of the main things that I mentioned. If somebody's specifically on the topic of naming, is this like, well, the one, one of the issues I have with Tailwind is I find it encourages an over component, a component of making too many components, like not every, like you don't want your, you know, you don't want every sync. Like I don't need my paragraph to be a component, right? And it's like, not everything needs to be one. And I just feel like it's sort of the natural evolution of using utilities for everything goes that way. And then you're naming every component. So just while you named every component, so that's the same as giving it a class name, like it's literally no different. So that's sort of on the naming front, that's how I see it. Yeah. But yeah. And like you, I think there's a lot, I went from being like the biggest supporter of BEM to over time being like, well, you know what, this is kind of annoying in a way for some stuff. I'm going to use some utility classes here and there and mix those in. And then yeah, they're in, I think there's there's definitely benefits there for sure. But like you said, finding that balance, I think is the important part. Yep. Team size. What phase your project is in? How big y'all are? Oh, I mean, there's just so many factors in determining what's right for people. So we have requests for naming more stuff in the chat. Cool. Yeah, that is the purpose. So here was another one. I'll send you in the thing. I was going to, I'll eventually make a tweet about this CSS tip. So here, we'll double up. People will learn something about CSS. And we're going to figure out what to name this instead of container. Nice. There we go. So we have a container with some feature settings and a font variant. So it's like teaching you the difference between font feature settings and font variants. You're like, I want ligatures. Well, why is one, one definitely has cooler ligatures than the other, right? Which one is that? Oh, font feature settings. Great. Take that and run. I'm so excited for all the typography stuff that's making its way into CSS. Because I used to be a bit of a type nerd. And it's just like, it's so nice seeing some of the ligatures come in and the other stuff and like all these different things that are making their way in that you're just like, yeah, that's great. It looks much, much prettier. Yep, all the font stuff is really nice. Yeah, text wrap balance. Yes, getting the line height unit. All sorts of stuff. Yes, we could nerd out on a typography episode. That'd be fun. So in this one, okay, so what do we have? We basically just want gap. So we have like a block container that just, and is there, oh, there is no gap in there, huh? We're just using h1 margins. We're just leaning into that. Yes, yeah. So really, we don't even need the container at all. That solves that problem. Just delete it. Hey, that's just like in a JavaScript review. You're like, you don't need this wrapper function. You could just call these things directly and get rid of some noise. Cool. That was my whole goal with that one was to delete it. Yeah, awesome. That's perfect. That's a great answer. All right, here's another one. I think this one's a little easier. That's nice. I do think though that that is an important thing is people do throw things in there a lot and you're sort of looking at the code. Sometimes you're just like, you know, if we got rid of that, would it actually change anything? I'm not sure. All right, this one, we have a UL with some images of some cute little kitties. We have no names. We just have a UL. Just a UL and it's like, what could this be named so that we can reuse this idea without abusing the unordered? Yes, we definitely don't want all the lists on our page introducing horizontal scrolling. Well, this has the nice little shadow on the sides too, which is cool. Yeah, what do we name this one? I mean, it's kind of got, is it a carousel? I guess carousels have buttons somewhere, so this has no buttons, which means it's just a horizontal scroller. Do we just call it? I mean, if we look at what it's doing, that's, we're just basically allowing overflow on the X with the display flex. If there is overflow, there's enough items in there, it will introduce horizontal scrolling, and that's sort of with just a little bit of spacing on there. This is an old school one that I made a long time ago and that I was like, this is fun. Is there, oops, just calling it horizontal scroll, horizontal scrolling, horizontal, I think that's a strong suggestion here. Yeah, anytime, because then you could get rid of the whole idea of, actually that whole UL selector would turn into, you would just need one that kind of changes the margins. I guess it's already baked into the concept of it, so I don't know. The padding, because a UL will come with padding, right? So you do need to reset the padding, but so would your scroll port. You're going to want padding in there. Yeah, dot scroller dot inline, that's a good hint. Oh yeah, inline, scroller, gallery inline. I do like that a lot of people are suggesting inline, because it's nice that inline are inline. I do, you know, that logical property naming is sort of bleeding into the everyday is really nice, because even when I'm just like teaching stuff, when it's very beginner, I figure I have to explain the idea of inline and block, but then like, once I get out of that, I never know when is it that I don't have to explain these things. Has the idea of the inline and block access gotten far enough into just the general geist of what we do that it doesn't have to be explained anymore or not, because I honestly don't know the answer to that. I need to do more in person teaching, I think, to figure that one out. I'll add that to my office hours questions, because I'm curious also, it's very ingrained in me at this point, just like saying they, I just love dropping the concept of a gender. I don't even have to care anymore. I don't have to care what country you're in. You're going to get great spacing and some natural directionality to your layout. I think about it less and I reach more people, but for some reason with scrollers, I don't do this. Scrolling to me kind of feels like a physical activity. I want a scroller on X, an inline scroller that changed might be weird, even if the language directionality changes. That is true. I still want an X scroller, so I'm a little torn with my overflows, whether or not logical is involved. You'll see a recent article I did on scroll driven animations and it's all using X and it felt very strange. I was like, but at the same time, I don't want this to switch, but maybe I do. So yeah, it's a curious one. Yeah, I was doing something the other day and I'm trying to remember what it was, but it had to do with layout. I think it was just about like the, it was sort of like this two-column thing, but it was dealing with the padding like where the two columns were meeting and at first I was using logical properties for it and then I'm like, wait, that would make no sense if it switched. Like with however I set it up, and I wish I could remember the example now, but I was just like, this should be left and should be right. Like that's what it needs to be regardless of what's happening, but it's just like realizing that of just not being like the logical property isn't just a replacement for it's just most of the time that's probably what you wanted, but sometimes it's not. Yeah, that's an interesting point. Well, here's another demo. I feel like we should transition out of this demo though with a bunch of cat jokes somehow. Like right meow, we need to go, you know, like I don't know, we sneak some meows and purrs in there. I don't know. Oh, nice. Oh, there's Quinton. Yeah, dude, just saw you in a meeting just before this one. Welcome. We were discussing CSS4 and 5. What is CSS4 and 5? We're literally going through the entire list of CSS properties as a group and deciding their fate in 3, 4, 5, or next. So you hear that now. CSS5 is going to get announced with CSS4. You heard it first on Kevin Powell's show. I'm looking forward to seeing what distinctions are made there and I'm happy I'm not sitting in on trying to make those decisions. But I think it's a cool, yeah. I even have a video that's like a rant saying that there's no CSS3 or CSS4 or 5 or something, but this was like from five years ago when like the whole thing had been set. But people were putting out videos on CSS4 to try and get more views because it's like, here's the new stuff. And I was like, there is none. Stop this nonsense. Now that video is not going to look so good. What I think is going to surprise people is they're going to be like, CSS4 is old. You're like, what? And you're going to be like, yeah, it's almost 10 years old. Like it started almost 10 years ago. Yeah, I've been using this for a long time. Yeah. Yeah. All right. Well, here's the tough, here's probably the toughest one of the demos I brought to the table. Tons of use of container. And yeah, we have to decide what is it doing? Is this thing just a card? Is this a content card? Because it's got a min size and a max size. Oh, that's weird. I used a max of pixels and a min of character units. I don't know. Oh, and that's interesting. It's on the block size that use the characters too. That is very specific because the way that flex and grids center things on the alignment of the content alignment, you have to have height or else there's no vertical space to distribute or to center within. Yeah. I just thought it was interesting to use the CH to set that size when you're looking at that way and not that way. Yeah, I should have used the line height. Oh, that would be a good one. I'm trying to find good use cases for line height, but we'll talk about that another day. I don't want to do RLS right now on that one. I'm immediately feeling like this is like our other one where we chunked it up. Like one concept is the concept of a surface. I really like the ideas of surfaces. So one of them is a raised surface layer and whatever you want to name that. I'm not really sure. I call it a surface. My thing and most of my projects and I'll have different surfaces that represent different levels of how close is it to you? Yeah. So would you, just on that, would you be the type that would you like a surface and then like a surface one? So like one of them sort of saying it's the surface and then the other one's doing, that's how you know the raisedness of it or is it just like, no, it's a surface one or two or three? Historically, I don't like repeating myself. So I always thought like surface dot surface one was kind of silly. I wouldn't name a class one or anything like that. So I'd probably just bake it into, I probably wouldn't have made a surface class, but recently in open props next version, I have a concept of a surface class that with nesting can know if it's nested inside of another surface and automatically assigns a surface color to it that is in front of the previous one. So it's completely automatic, one class name to rule them all. I'm quite excited about it, but yeah. That's cool. So surface and then I guess like you're doing, depending on, you know, we could have more. Usually my surfaces are adaptive to, yeah, you'd have like a light and dark concept there. Yeah, surface, you know, just to say, I mean, it's light because we're not dark. And then just for fun, we could make, so let's just say we did a surface light and then this one could be our surface dark and then dark just so we can sort of show off this idea. And then we had a dark surface. And I guess, do you include your colors in surfaces? I do. Yeah, I think it's important for the surface to come with a text color. So then you can sort of handle accessibility of the pairing. Perfect. I like that too. Cool. So we get our surfaces there that set our background colors and our text colors. So then again, we have a max inline size with margin inline auto. So similar to the first one you brought to the table. And we called that main content or something like that, right? Do I still have it open? We had a, we went through a few different things, main inline auto, main size auto, main, main column, auto, main column. Let's just say we'll go with the inline auto for now, but we can, so that would be for margin inline. And we bring in our inline, those on there, except I broke something. Oh, because I took them off. We'd have to main inline auto. I do, I always love when I do that. And then I'm like, wait, how did I break things? Everything is set up properly. And it's like, oh yeah, we have to actually use those now. And I probably spelled something wrong. Main inline auto, yeah. Second one there has the typo. Ooh, that's one of my code pen bugs that bug me is when I want to just go somewhere and it just scrolls me. Cool. There we go. So we get those ones. And I guess that's always the fun part is that I did main, I think I like main inline. I was like, do we inline main auto? Is it like, what's the order of the wording? Let's just say we go with that. Then we have the box sizing border box, the padding, and a min block size. And these are all important for your demo. Yeah. This one usually is handled just on the star selector. It is. Yeah. And I think that's a healthy star selector item. So what else do you put on your star selector while we're there? Awesome. There we go. Okay, cool. So now we've got this min block size. That's like the padding one. I could feel like it's common enough that it's not too hard to come up with a solution. The min block size I find is a hard one because it's so it's not something you would probably, well, I guess it depends. Here we are reusing it on all of them. But it's just like, it's such a unique thing of like, I need this very specific min height on something. Yeah. Or maybe it's a row concept. So you could be like, oh, what would you call it? It's just like a fixed row or it's a demo row. Demo row. And then so on that, actually, we'll come, actually, maybe this could lead nicely into another one that I have. But yeah, so say we did demo row, because that sets up the row itself well. But I'm guessing would you have the padding on the demo row? No. So here's another one that I've been so long with surface. Another concept I'm playing with for padding is just a class name called padding. And inside of it, it sets a custom property to whatever the default value is. And I'll do dash underscore padding. So the custom property is scoped and matches the name of the class. And then I'll use it. And yeah, you can even set the default value right there as two rim. And that way, overrides are easy, because anytime you use the padding class, you just specify what your override is. It's very short and semantic. So anytime you want padding, you just put padding on the thing. If you're doing it this way, do you set it up like that? Or would you do it with the fall back? Like, is it like that? I always mix it up when I'm doing it. You had it right. Yeah. Okay. You're just setting it like that. And then so then you're just redeclering that on the elements where you need them. Where I need the exception. So yeah, usually padding is pretty standard. Anytime I need to deviate the selector, whatever the component is usually can provide the selector as a context. It's a concept I'm playing with where I'm trying to find a happy medium between a class name that represents the component-based class, sprinkling in utilities, and then allowing the custom properties to be the way that you handle the wiggliness. Cool. Nice. Yeah, we'll see if it plays out. The underscore someone asked in chat is a naming convention brought from JavaScript back in the day. Leah Verru presented it in an article called like 321, Custom Properties or something. It's pseudo private. So when JavaScript first came out, we had no private classes or private properties. And so you put them in the underscore which signaled to the other developers on your team. Don't use these. They're supposed to be private and constants. And now we have the actual value there. I just put a link to Leah's article for anyone who wants in the chat. It's a good one. Perfect. Yeah. It's a good signal to other people that's a scoped custom property, not a global custom property. Yeah. Cool. Even though it's not really scoped. Although it kind of is. I don't know. It's not global. Exactly. Just before we move on to the next one, just because we've been chatting for a while now, and I had my technical difficulties at the beginning, so I never asked you if you have like a hard time limit. Let me see. I don't think so. No, let's keep going. If you've got time, I've got time. I'm having a blast. This is also education for me because I need to know the answers to some of these. I'd love to improve my own naming of these things and doing it live in front of people where it's embarrassing is just the best way to do it. I think it's educational for people. And this always happens when I do a live stream where I'm actually building stuff and they're like, oh, he makes mistakes all the time. It's not like those polished tutorials where things go really smoothly. And it's like, no, that's nobody does stuff like that. That's why I think it's unfair sometimes to learn that way. It gives you this impression that we all are perfect in. No, this is a journey. I feel like front end is always a journey. There's bosses. There's mini bosses. That's all I have to say. You all know exactly what I mean. Okay, here's another one. I think this one's easier unless you have one. Oh, you do. You would do this one first or yours? Yeah, let's do yours. Yeah, okay. Something like this. I just put the ignore the lime green on there. It was just so we could visualize what's happening where things wrap down or when they get bigger. I do this all the time. Yeah, it's common one. Yep. Super common. A nice simple pattern. I think that we see a lot that I've called probably 10 different things. One thing I don't like calling it. And I started at one point, I think I just called it flex wrap because that's basically what it's doing. But I don't feel like it really tells the whole picture of what's going on. I'm not sure why. It's too abstract. Yeah. And it's also, it is doing more. You've got a nested star selector there that's kind of like, which is where, yeah, tailwind would have a lot to say here. It'd have a lot to say on each child and a lot to say on the parent. But what's cool for us in this moment is one class name on the parent can contain the entire intent of the thing and scale as more items are added and removed. And you don't have to, this is something in JavaScript with tailwind that I don't know why people are so tolerant of. It's like maybe initially authoring it was easy, easy-ish. You copied a whole bunch of classes and you paste them on or then you worked out the rest of the details. But then when you need to dynamically add an item, you have to go copy all that junk into a string and oh, just like this seems so annoying, but I'm sure you've got a framework and a component system that's, it made it so it's less painful than it should be. But that's what I mean is like, there's a pile of tools to make tailwind less painful where it's fringy and not as handy. Anyway, it's just everything has to trade off. And so sometimes it's just, that's just one of those moments. I call this a tag list. This is at least what I've called it a lot of times. And this was one of the things, I don't even have it on my notes, I'm just now remembering is that a lot of times when I use container or wrapper, it's a list. But we don't ever, for some reason, use list often enough, unless it's a ULLI. And then we're like, oh, that's a list. But we're often listing data. Anytime you're rendering an array, you have a list of stuff and you have to have a container of sheep. That's a sheep list, right? You're defensively managing a list of stuff. And we work in a lot of unknowns in CSS. And so it kind of makes sense to use the word list more, it seems like. I probably should have made it an actual list because usually these types of things actually are actual lists at the same time. It's going a bit quick making the demo and just did, it's a div, everything's a div. But yeah, I think that's good. When you were saying that, I was like, oh, man, why'd I use divs everywhere? I hadn't even judged you for that yet until you just said that. I'm like, dang, yeah, it should have been. And then obviously then also comes in, you know, display, not display, list, style, list, style, none. And margin padding and stuff. I think I already turned off. So that's fine. Awesome. Yeah, we got our little list of stuff going on there. Cool. I'll open up your example here. I'll paste it. I have a feeling it's we're gonna have a similar answer. Let's see. Oh, maybe not because it's containing more stuff. Let's see. Where's the container class actually? Oh, good. It's on the list. It's a list. I mean, I think it's a list because we've got the controls, which that's a nice name for that list of controls, controls with the field set with nice IDs. Okay, that makes sense. But yeah, container. Oh, look, we have container and box. Oh, shit. And a customer. Sorry. We've got a double infraction here. We have two tickets from the naming police have showed up and they're like, you can't name that container. You can't name those boxes even though they are visually boxes. There's got to be a better. So the container itself is a very adaptive layout. Yeah. I'm just gonna put an outline in here so I can see it. I'm fine five pixels solid and I'm I'm assuming I know where it is. Yes, that's what I was assuming it would be. So it's just our container of elements. Actually, I had a very similar one example that was this one's cooler than mine. So I'm happy I came up because this is, you know, I mean, the main part of this is you have display grid, your grid template columns that just have the auto fit or auto fill in this case, and then the min max coming on there. And actually, this is one of those times where I can see the use for it being an auto fill first fit. Yeah, because I'm always like, I'm like, there's the two of them and just put auto fit and it's probably what you want. But I'm like, yeah, but this makes sense on this one. Yeah. Here we go. We'll combine Herbert and Ted's suggestions for periodic thingies. Brilliant. So in this, yeah, oh, sorry, go. No, please take it. I was gonna just segue, but you do it. It's your show. I want you to do it. No, I was gonna. I was just gonna say on a situation like this, like it could, there's, there's so many different names that I could come up with just because am I doing something that's specific for this use case, in which case just like, you know, element grid makes a lot of sense because I think that's sort of describing what this is. Or I mean, how? Oops. Oh, yeah, I broke everything, but just even a periodic, periodic table because it's effectively what we're doing is creating the table in a sense. I'm just going to take that off so it doesn't break everything. So maybe I'll put a comment up here of different names we could use because in a sense, we're just, we're just doing our table up at the top. But yeah, I was, I'm not sure now what you would go for. Or it's a little bit here, a little bit of what I'm saying, I guess here is Franz Toy said it is what it does or what it is versus what it does. Yes, that's what I was going to bring up to, which is one of the notes I came into today, which is sometimes we name things based on what we need it to do versus what it is. And so that's very much what they just said. And then this also kind of comes down to like generic names versus abstract names versus utility names. Like, do we, is this layout a reusable one? Arguably probably not. I mean, it is kind of conceptually, but this is a very specific size 15 characters for each element being flexible to fit inside the thing. I don't know if that's really a generic, like where else in your app are you going to use that? I don't know. Maybe the grid and the gap part are reusable. So you could just say like block grid block. And then you've got your template columns comes in as some sort of other other utility class that applies the coolness. But then again, that's that might be a scenario where you're breaking it down into two smaller pieces. Whereas this one is better contained, self mobile, understandable at a glance, shareable. Someone else comes to this code later on, what are they going to appreciate more to split up class names between the display grid and the template columns? Are they going to want to see it all in one little spot? Yeah. Yeah. And I agree, especially like, because it is using the auto fill too, whereas like, I think the auto fit is the one that is a bit more you just like throw a custom property down here and it can be thrown around for different stuff. Whereas here it is the combination of a very specific size, a very specific gap and the auto fill, like, it looks like something that you could potentially reuse everywhere, but it probably is serving this one purpose really well. And like you said, it's nice if you just came across and it said whatever, did you have an idea for the name? A periodic list. It's another one of those ones where I feel like list should be in the name. So if we came across a periodic list and you see this, it's pretty easy to understand what it's doing and what's going on with it. And then we have our box down below, which I'm guessing. Oh, it's container too. It's a container type. That was so that the name of the element or like the short name of it could be responsive to the container it was in. So that's how those letters are fitting in so nicely in the adaptive size of the Very nice. Yeah. The container units are so cool. They're super cool. Yeah. It's so nice having those. It's almost I find myself like container queries. There's so much cool that you can do with them from like just the layout per side. Like it makes so much sense. But I find that got so much attention and the units sort of just because that was what everyone was looking for and God, we finally have that. And it's like, we have these really awesome new units that are what you probably wanted when you got viewport units. It's Yeah. Every time you use 50%, you probably meant what these units give you. Yeah. Yeah. Yeah. So each one of these is a box. So would it be better if this is our period? Okay. So this is actually a little bit like you mentioned here where I have my little nested star selector. And I have another example coming up to where I have a nested star selector with because this is sort of this one off element that, you know, it has its one purpose just as this. Do we need to name this? Or could that just become a the same idea of like any direct oops, any, I guess we don't need that anymore. We could just do it like that too. Any direct descendant is getting these styles because really nothing else should be in there. It should just be the box and then I don't have to worry about naming it. Or would you prefer to name these because then you're actually saying what it is? I love the tension. Another, this is another good tension that no one teaches you about with nesting is there's kind of a slippery slope that can happen here, which is if you move and I agree, I think box very naturally feels like it should be in the direct descendant because the size of the box, the way the box works is very related to the container and the layout that it's inside of. But then you're like, then do I nest all of the styles for each of the elements inside of the box inside of that one and all of a sudden you're four or five levels deep and it starts to get soupy in a new way at which point it signals to you to break it back out. So yeah, you put it in for one side of a trade off and pulled it out for the other side of the trade off. I don't know the answer. I wrote this one a long time ago before I think I was like doing some of the the nesting work. What would I do now? I tend to mentally, especially when a layout and the children have a tight coupling, to bake that into the selector so that the style would, so maybe in this case, it would grab the container. What would move up if we were to move things into a direct descendant selector inside a container inside of the periodic list that said all the boxes need to do this? It's probably the padding in the ratio and the because the rest of it is a little more independent. The container type and the alignment and the display grid feels specific to its container and its children versus oh the padding is too. I don't know. Yeah, what are you thinking here? Um, I'm not sure either. It would. I just want to see that's controls. I'm so I'm not anytime I like it. Pugged my mind goes in circles a little bit, but we have for every element. So we have the container and then we have the box for each one, which makes sense. I guess I could just look in the dev tools, but I have to inline the style tag there for the names. Yes, everyone needs to have its own. Yeah, that's the one and I get why it needs to be like that, but it's that one thing where you're just like, oh, it'd be nice if we didn't have that constraint. Declareably naming 30 elements is really annoying. Yeah. I would I think my I think if it was more just layout related, like actually I'll show you the other because the other one I had was a lot simpler. Nice. And whoops, I should just pull it into this window. So if it's something, I'm sorry, I have tabs. There we go. Like this is a really common thing where display flex gap and then you're just doing something here to make sure they're all equal columns. So, you know, I'm not doing any like the only and actually let's just take this off here just so people can see the difference. If I don't have that flex one on there, the columns won't be equal and it's not a huge shift. Actually, I thought it would be a bit longer. Let's just whoop. There's that code pending again. I'll just make a new paragraph in this one. P that's only like five words long. Whoops. Lorem five. There we go. Nice. I didn't know you could ask for Lorem at a certain number of words. Very cool. There you go. Yeah, super handy. So yeah, if I don't have that flex one on there, they end up being different widths. So like the purpose of this parent is to make columns, but also to make try and balance them out. So having that nested star selector just enforces that they all have the same size on them. So in a situation like this, I don't really like I don't really want this to be its own class because it's sort of like it's baked into this behavior of what I want. Yep. So just doing it this way to me makes more sense. Whereas on something like this, just because it's not just I'm not setting just the size or just if I was say setting the padding because I knew every child there just needed to have that padding. It's one thing. But when you start going, okay, I need to have all of these different things going on. It's just like, well, you know, it's not that much harder just to call it, you know, it's an I won't do it here because it breaks everything. But you know, is it just an element or whatever, like I'm just describing exactly what I need for that to be. And then maybe within there, I can nest and worry about things because it's going to be specific sort of to this thing here. But yeah, that would be a little bit of my thinking. Totally agree. And you reminded me of two scenarios that are really great for nesting where the parent and the child do have a tight relationship. If a child is articulating an exception to the alignment where it says align self or justify self place self, I like to put those with the original grid layout. So that would be nested and it would target the that way I can see the layout and I can see the exceptions in one spot. Another good one is with scroll snaps. So if I've got an overflowing container, and it's articulating that it's scroll snap type mandatory, I like to put the items that are snap targets with that set of styles that way in one glance, I can see the articulation of the overflow, the scroll snap requirements and the scroll snap items in one spot nesting makes it all bundled up tight. It looks great. Yep. Yeah, that makes sense. Prevent the hunt. Oh, so that's good. So it's like you're organizing to prevent the hunt because the scattered hunt sucks. Yes, it definitely does. Yeah. We had a few suggestions here. I'm just going to look. Well, the only one actually I can see now is atomic card because it's a little atomic element card. Oh, that's cute. Yeah. I like the list by or the suggestion by Herbert to where they're just like you don't have the nest you can just do dot periodic list and then target them. And that way that works. You prevent all the multi levels are going deeper. That's the thing with like news, new tech and new shiny toys is sometimes we over index on them and have to realize how to be like, oh, I guess the old school way didn't suck that bad and just kind of had some charm to it. Yeah. Yeah. And then actually, just since we're on the topic of naming, one person did ask if there's any times that you still use IDs in your CSS. Oh, in my CSS. Because IDs have a purpose, definitely. But do you ever select something based on its ID? Theming seems to be a common one has has makes for a good use case of IDs. Because you can drastically limit the scope of has and kind of avoids performance issues that way. Plus, it's nice if you're using that anyway. So, yes, with has other times where I've written ID in my CSS recently. No, I mean, I think those are kind of it. How about you? Yeah, I tend, I can't remember the last time I've done one. Yeah. And yeah, that makes sense with has just to sort of be a little bit more specific, just because I didn't know I was actually maybe you have some insight there because I know there was an article. I mean, I forget who put it out. There was an article it was looking at because in the edge dev tools, you can like measure your selector performance to see if selectors are slowing stuff down. Sounds like Patrick Brossett's article. Yes, yeah, I think so. And so I was playing around a ton with it to see if I could like come up with terrible performing selectors just to see what what what was out there. And I was surprised. I think even like the is and where the performance was taking a hit on like the same selector basically from whether I was using it or not. It was just like a list of selectors versus using is and it wasn't like, Oh my God, but it was like, Oh, there's, you know, a noticeable difference. But I'm also like, I know browsers are really good at like, we're going to put it in and then getting like the things that we used to see as performance issues are no longer performance issues. And like, they'll probably optimize this at one point. But right now it was that wasn't the priority number one of getting it functional. Yeah. And with house two, I can imagine it's a little bit harder for the browser to figure out because there's a lot more going on. So yeah, to Firefox though, which we'll show you in this tiles pane when you use has, if it's an expensive one or not. Oh, cool. So they kind of inline the education, which is really nice to be like. Yeah, I was, I'm wondering, get away from that demo, sort and filter it a little bit. It's just fun. Is this, I think, yeah. Oh, that was one second. Let me do that one again. The little bounce there is awesome. That's cool. The view transitions are amazing. Yeah. If anyone hasn't played around with view transitions yet, definitely, definitely worth it. And on like the other than them all having to have their own name to be able to get things to work properly, like the single page ones are just, it's so easy to do. Or even the I mean, the cross pages too, but I think it's still only behind a flag. Yeah, behind a flag. Yep. Yeah, I only had one more demo, but here it is. And it's kind of a fun one too, because it emulates a Spotify playlist that has hundreds of items in it. And it's a good use case for contained intrinsic size and content visibility, which are generally lesser known properties. But I used container in there, and it's definitely a list. This needs a better name. You can tell what I was focused on. I was focused on creating a demo that uses contained intrinsic size meaningfully. But yeah. So yeah, in this case, it goes back a little bit to the early one where we were just using it to set a gap, basically. Yeah, the Just For Gap class. The Open Props website has that class called Just For Gap, and it's everywhere. That's funny. Which is, yeah, it's kind of like a joke class, but then it got stuck. And anyway, yeah, I scratch my hand like, it's there. Yeah, I'm actually curious if the chat has anything on that one, because it's definitely it's funny. You basically just, in a way, we sort of want to say, the grid is just a byproduct of wanting this. That's the only reason it's there. And luckily it doesn't, there's no side effects, really. I mean, there are, but they don't tend to crop in, I think, on most things. Even though one thing that's kind of cool is the vertically centering stuff is coming to block level elements now, isn't it, or something? Which is, yeah, like a line. Yeah, display block with a line content center. Yeah, that's kind of interesting. So we just need a gap now that would nuke mark. It's like, how would that work? Yeah, it'd be cool. I mean, the gap property is so useful. I was just actually looking at an old Flexbox lesson I had, where I was talking about how the bad browser support for it with Flex at the time, and just like sort of the fallback if you need it. I'm like, I'm so happy we have gap. It's like, how did we function without it in the past? It's like... Seriously. It's exactly what we need in so many, in most of the cases, yeah. So yeah, a little bit to what you were saying before, where everything's a list. Alvaro did mention, we could just call it track list. Track list, and that's super descriptive of what it is. Yep. And if you want a list of tracks, use the class name, track list. Hey, it's nice when they're that obvious. Yeah. And I think part of it, a lot of it, track list. And actually, that's sort of, I think it goes back to a little bit of what we were saying before, is like, do you want to describe what it is or what it's doing and finding that balance? Because I think it's one of the things too, where it's hard to develop the skill, because when we're doing, even on a demo like this, you could definitely just do track list. And it's perfect, because that's exactly what it is. But this is 100% the type of thing, that this could be a gap with the var size five is the fallback. And then this becomes something that's much more reusable, and you can modify the gap where you need to. And then the track list doesn't make sense anymore. It would be something you could place anywhere. And it's just like the scope of projects, I feel, plays so much into how you end up naming things. And a lot of in the early days, you tend to do this a lot more, because, you know, you're building that one page site that only has five things on it. So, you can do that a lot more often. Whereas, the more things scale up, the more you're sort of hunting down that idea of what we were doing in, I'm going to pull up the wrong one. Oh, no, it was this one, where it's like, no, it actually makes sense to pull out and make a padding here and to make a demo row and to make the margin, the main inline and to make the surface classes. And it's like, and even on like that surface class, like, you know, some things you might just have a bunch of cards, and they're just there. And you just call it card. Is it a card light and dark? Or is it a card? And then you're playing with the surface. And like, you know, maybe on that first version you're doing, there are only one surface, and they never get darker. So you never worry about it. And then all of a sudden, there's a change to the design or a new component comes in. And then you have to start worrying about those things. And it becomes really, and I think that's part of the hard part too, is, is like, when do you plan for scale? And when do you just build to, like, a small thing that you have to? Because I think that that can, I think the more you're worried about scale, not necessarily the more important the names are, but the more you're sort of thinking about this idea of breaking things, you know, finding that the balance becomes more important, I think. And that's annoying that it's sort of like that extra thing that we definitely do want to focus on and think about. Whereas on something that's, if it's this, you know, if I was, if we're creating, or say this was on Spotify's website just for fun, and we have that, it's working perfectly, but would this class be useful in other spots? Or is it really just the track list, and it's unique, and we don't have to worry about it? And yeah, it makes it hard. It's hard that that's what you're articulating is like a classic tension. Again, I love these tensions in design systems where it's like, what phase are you and your team at? It also kind of ties into like, atomics where you've got your atoms, your molecules and your organisms. Those change as your team grows and your product grow, and the needs change. So it's like, you can, at a small team size, you might be optimizing too early for things, like you're trying to predict the future, and then the future ends up being something else, and then you wish you hadn't done that. Other times you predicted the future in a way that ended up being healthy, and it's just hard to know these things until they're right in front of you, being proactive. I think that's maybe why this class name is really difficult, is you're trying to be proactive about the futures that it will face, and as we call them wiggly, and they adapt to screen size, to preference colors, to motion preferences, there's just so many factors that change the way that this thing looks. You can't always describe it based on how it looks, because those are kind of untrue. That's why we have relative units, right? And stuff like that. It's just so many layers to the needs that we have from, and I wonder if even like a kind of clear separation is like, the HTML is the what? And so maybe it shouldn't ever be in the name of your CSS class name, because that's more about how it looks and behaves, in a way that is JavaScript behavior. Anyway, I wonder if there's like a way that you could try to section these things out in terms of responsibility. So that way, it at least informs, this is kind of like what Ben was trying to do, is like inform you about the decisions that you make of a name, and be slightly prescriptive to help orient people when they need to make these difficult choices. Yeah, I'm seeing if there's any big insights from from the chat. One person mentioned the mix ins being something that could resolve it, but then I just feel like you have to name your mix in still. So you're still naming it somewhere. You know, and for anyone who doesn't know the mix in, and actually I don't know, I know there's been talk of bringing mix ins to CSS. Do you know if there's any pain? Yeah, there's an explainer in a spec. Hold on. So the classic mix ins coming from SAS where we can't use it here because I could switch it over. But you'd have a mix in called, I don't know, call it just for gap. Just for gap. There would be a display grid and your gap here of whatever. And then down here, when you're setting up your track list that has other styles on it and other stuff, you could just do an add include of just for gap. And then you could even have like here we could have a gap. And then this would become your gap. And then here we could say this is five rem and you could like change the value of your gap and you could have a default value and other stuff set up. So it worked. I've broken everything because this is SAS. It's not regular CSS. But here we go is I'll put that into the chat as well. The CSS mix ins and functions explainer, which at function, so that would be for a custom file, just be bringing in the mix in would look very similar. But it's using instead of SAS variables, it would be using custom properties, which makes sense. Yep. So basically is exactly the same thing, but just slightly different syntax, but almost the same. I think it's optionally typed also. So if you want to type the parameters, you can enforce it at CSS. Nice. Cool. So this stage are these in? Yes. Yeah. Yeah. Yeah. This is one of those just before we actually before we get to that, one of the things about the whole idea of like breaking CSS up into like four and five and like having the different levels of it for me is kind like as an educator on it. And that was sort of what sold me on it when the first talk of it was coming up is it sort of creates for the person learning it like where what where should I be learning right now and you can sort of focus on these different bits because this is the type of thing that you might come across and be like, oh, this is CSS like what's going on. I don't understand any of this and you're like, oh, that's part of CSS seven. I'm not going to worry about it for a while because I have this other stuff that I should probably learn first. Yep, totally. So yeah, I was in it. Yeah, what the comment was. Yeah. I was just asking about if you know what the state of it is right now. Yes. A Chromey Mentionier is going to prototype the functions. The spec is still, well, it still lives on Miriam's website. So it's kind of like container queries where it stayed there for a while. There's CSS working group discussions. They've listed them right there, which is really nice. It's super early. I think it's still wiggly, the syntax. So I wouldn't go betting on any of this stuff yet. You could try to make a post-cSS plugin if you're feeling savvy, but yeah. Awesome. Yeah, Miriam has been going, she's been doing a lot of proposals. They rock. They've got to be one of my favorites. 100 percent. I'm, do I have any others that I've created? Okay, I don't, but I have. Let me find this. Oh, I have two, actually. These are screenshots, though. Once again, going to Dribble, where this is less so just on this top part of a website, which whenever I do it in my demos, I call it the hero, because that's sort of what's come from the design. The designers out there always call that the hero. And then the first seven comments are always like, why do you call it a hero? And I'm like, well, it's that first thing you see. I don't know. Everybody calls it that. It's a little bit like the container. It doesn't have cape and underpants. Yeah. What's the deal? Yeah. But the one thing with it, and this probably isn't the best, in a way, it's a good example, because I think most layouts and it's Dribble. So we don't, do we have anything else to look at? I'm not sure if he has the full layout or not. I should have inspected more, but they're often not like totally unique, but they do have enough customs. Like it'll be, you know, the image is often bigger here. It's sort of like overflowing at the right. And then you might not really see that pattern anywhere else on the website. So like having its own name does make sense, but hero is kind of a strange name. It is kind of a strange name. Yeah. It's very print reminiscent as well. Yeah. Exactly. Yeah. I mean, I would put this in a header element. So that way that's kind of like what it is. And it's a showcase. It's like a full bleed showcase. So if you wanted to be a little bit more descriptive about like what it's trying to look like, and then you have, it's got like a slider in it or something. That's sort of the next component that's been listed inside. But yeah, I'd say it's like a full bleed header showcase thing. I like that. I even, I like using that the word header in there, just because like you said, like it's going to be the header anyway in your HTML. So like why, and it is the header of the site, like why call it the hero when it's the header, right? You know, it's probably like the showcase makes sense as well. I think it's more descriptive. Like, as I said, like I get so many questions on why calling it a hero, whereas if I called it a showcase, I think people would understand more on like just, I think it means more than the word hero does, which doesn't make very much sense. Just reply to them with that Enrique Glacias song. I can't be your hero, baby. They'd be like, why? How is this related? You're like, it's not. This is sort of the trendy one now. Yeah, bento. The reason I wanted to bring it up, because I think bento is sort of become, most people are cool with calling it bento, just because it's sort of, you know, with the bento box, my kids lunch boxes are all the style now and everything. We get that. But the problem I see when I get to it is, because like in, I guess there's different ways of like developing this, but this is like kind of an easier one. Like sometimes you get these weird spans that are going and stuff, but like, it's really easy to do with grid now to make a layout like this. But it's also very one off on how you end up coding it. And so like most, I've seen several sites now where it's like, you don't just get this one time on your page where here's your bento layout. It's like every bento later coming across has a different layout to it where it's like, yes, maybe the grid's the same. Sometimes the grid, like if the grid was always the same and then you're modifying it, you could, you know, do the classic bento one, bento two, bento three or something. But like, if everyone has like just a completely different grid too, it's like, okay, I don't know anymore. Because if I call it bento, and there's seven different things going on, like every time I do it, and you just need, at one point, like there is some hard coding of either grid areas or grid line numbers or spans on specific, you know, end of child, whatever you're doing it, there's so many different ways to approach it. But it's just that idea of like, if you have more than one that are different, then what do you do? I just thought of a suggestion, which is if you are struggling to name these things and containers currently in your markup, consider talking with the designer. I mean, this could just spark conversation to be like, if you're struggling to name it, you could ask someone who should have named it or might have some better names for you. But yeah, you're right, because the bento also changes shape multiple times, so it's not like you can call this one a three-road, four-column bento or whatever, with two poppers. Yeah, what do you call this? Because you could break it down into smaller pieces, so you've got like, it is two columns, each column has two rows with a dominant element in it, but then you're sort of, you're muddying up that this is a unit together. This is a cohesive layout that the parent is driving the show here, and it's going to rearrange and it's going to promote, having promoted items is nice, because that's going to be like in a CMS, like I could see the back end, you know, whoever's authoring the site is going to have visioning be a promoted one, and engagement be a promoted one. It's a list. It's a bento list with two promoted items, boom, ship it. No, that's maybe better, but not really. Bento, I agree, is sort of a trendy name for it, but I don't necessarily think we should bake the trendy name into, well, maybe you should, it's really hard. Just, we had one question about why bento and not masonry, and I do think there's a slight difference where masonry, oh masonry, yeah, they're similar. They're definitely similar. Bento, to me, is more encapsulated, whereas masonry, like just, it can keep on going, like the Pinterest style, or it might not end flush. It's like auto fill versus auto fit. Masonry has a ragged edge, always has a ragged edge. It's more about an intrinsic size of items being packed towards an edge, whereas bento is, it's filling a given space, edge to edge with various sized boxes that have a type of harmony and organization. Yeah, they're always going to be flush and then make designers happy, and you get it to be right. I know, right, you're like, this is so perfect. I can't wait until the CMS has a description that makes that block blow up. Yeah, exactly. It's just asking for overflows along here. Yeah, so much design is idealistic, which is annoying for us on the front end because we have to deal with the unknowns, with the single word descriptions, the two long descriptions. Yeah, I will give this designer credit, though, because they put the ellipsis on anything that was over two lines of text. So at least they planned for it, even though it was just a dribble design. Have you seen that hashtag that's ellipsis not a content solution? No, I haven't. Oh, it's so awesome. It's basically just a list of examples where you'll be reading your emails, and email always has the subject, it has ellipsis, and so do your notifications on your phone. Any time the ellipse is somewhere, you can find the word ass instead of assistant, or just like all these cuss words show up in the ellipsis. You tried, but you made a new sentence out of that. Yeah. And I had this one, and I don't remember what I pulled this one up for. At least we see a few lists pop out. I wonder if that's like one of the takeaways here, is like a list is good because a list is generic enough to be horizontal or vertical, so it sort of is it handles the wiggliness of responsive. It articulates that it could be of any length, which is often these things are one to three or whatever, or one to five. But in that hero area, yeah, there's the hero concept again, and that under the nav bar header, there's definitely that's a two column layout, but with nested two column layouts in it. Yep. So here's someone was asking in the very beginning of the chat about like open props layouts, they want layouts and open props and design systems, which I've been involved in a whole bunch of them, have never answered layouts. And I think it's because we like them to have variability like the variation in them is their power. It's the only way to make content pop is to break the grid. And if all you did was provide eight grids, you'd never have visual intrigue in some, I don't know. I don't know playouts ever will find a space where they're as utilitarian as other things are. Right. Yeah, that's a good point. And that does one of the things maybe it was for this one that I wanted to bring it up is that idea of when you're naming stuff, like the idea of the layout versus the content itself, or not the content, but like the component itself that you might be placing into a layout is I think like here where we have this like nested two column here, really like you just, we almost had like you said, you have this area that has two columns where you can just throw your image with a button and then have fun trying to get that arrow to always point at the right spot when it's responsive. But then on like the other side of the text, it's sort of like you have text and then something that's making two columns and then you have those elements. So like to me, almost there, like the fact that it's two columns doesn't, it's just something that needs to be able to make two columns. The only thing it's kind of annoying is that it doesn't seem to like if they were full width, it would be okay, but then they have this like random margin on the side to give it space for the arrow, which makes things a little bit more novel and that anytime it's something is novel, that's the fun part where you have to name it because it's different from from the rest. Whereas like down here, you could just do something that creates three columns or it doesn't even have to be three columns, it could be like I looked at before where it just makes columns. And that's always the fun part too on that is like when, like you were saying too, it's like a design system. It's finding that spot where when do my three columns not, when are they not three columns anymore? Because we're going to run out of space and they can't stay like that forever and is every time we have three columns need to break at the same amount of space. Because if the content like these have tons of padding on them and maybe they need to break earlier versus if you have these little things down here, if they were placed in a three column layout, maybe they could get an hour or more than the other stuff and it, you know, even if you're using container queries or something, it doesn't solve that problem, which can be really hard. And where we, I think we do end up coming up with more generic solutions because it's easier because we can't just sit around and think about this all day long. I like though that you bring up that layout is at least the layouts that this is this here's another tension is like intrinsic design, intrinsic layouts solve problems that you can't foresee because you don't know the font size, you don't know the viewport size. So the more intrinsic that you can kind of like treat something, you end up reaching further. But the initial desire, and I see this in most of the juniors that I mentor that I help guide, they'll create an extrinsic layout because they're matching the comp. And so yeah, we looked at this and immediately said to go as soon as you started pointing out though that there was some excess margin on the right after those two boxes, I was like, holy crap, this isn't a two column layout. This is just a wrapping inline flex layout. Because what I actually want this thing to do is adapt to a narrower amount of space and become a vertical stack. So it's no longer a two column concept at all. It's a wrapping concept. And yeah, I think a lot of things end up being wrapping concepts. One of the fun things about the open props website is I designed it in a way I've never seen a designer do, which is everything is rag right, just like text. So I mentioned that when I looked at the container and I said sometimes you get sites that are actually on the right side, but it's not often you see it. I've never noticed it before in all the times I've been here. But yeah, we're left aligned zooming out anytime something can, it fills to the right. See, the whole entire site is built this way that every single thing will fill as it can to the right. Yeah, that whole section right there. Oh, that's funny that those little allies on autocomplete, maybe I have a line break. Anyway, there and that's with like a single class or it says autocomplete underneath the so there's getting started scroll down a little. And then it said autocomplete VS code. I kind of imagine that would be next to CLI but it looks like the whole new section. Anyway, it kind of goes down the whole site like that where and I call it rag right design, which is a lot like what text does text always tries to align itself to the left edge wrapping as it goes. And I had fun making a design in that ethos of rag right, which is an old typography term. And yeah, except those full bleed areas, they'll stay full bleed as they go, no matter why you get no matter what. So it has like a fun desktop experience because it fills the width when meaningful. And things are trying to but that but they they wrap instead anyway, it's just fun. And for anyone who doesn't know, I just put the link to open props in the chat. Me and Adam have talked about it in the past. It's sort of a supercharged CSS variables like you say right here where it takes a lot of sort of how would you describe it? You're going to describe it better than I can. You must have the elevator pitch for it. At this point, like one of its goals is just to stash all of the amazing things that a custom property can hold into little packs for you to import. So like a recent addition was durations. And we have concepts in there like one minute. So you have a variable of one minute, you have a variable of one day, you have a variable of an atom, you have a variable of a leap year, you have a variable of like, there's just all these random durations. Anything we can stick in a variable and give it a nice name. I want this to be the way that they all get stashed. And so of course it also comes with design system friendly packs, color packs, size packs, there's font size packs that we were talking earlier about the content sizes. I really like those ones. I use those ones a lot. I wish designers would think more in terms of like content sizes. Yes. Yeah. Like, yeah, your content one to three. And size headers. So again, like a header, like you never want the header to always extend the full width of the text. Like if you look at a newspaper, you know they're hand crafting those line breaks. Well, we can't do that. So what you can do instead is put a text wrap balance on there and set a max width that's healthy for headers. Because headers have much larger text. So you can't just say 20 characters wide, because 20 headline characters can be massive. Yeah. Oh, then yeah, someone thank you. You mentioned the box shadows. I think the shadows do they're adaptive to light and dark, which is really critical. So there you go. They're nice and dark on a dark theme right there. If you switch to the light theme, they adjust and it's kind of nice. I was trying I was doing it and I did a video the other day, because my DevTools are undocked. So maybe I should show people this. I can't find where is it? Oh, you know what? Maybe that's why I didn't see it. Let me dock my DevTools. But they're also zoomed in. So that might be why that's the wrong one dock to the bottom. They're so zoomed in. But oh, I just saw it. I was going. Yeah, this little guy. Yeah, I watched your video and yeah, and then command prompt thing. Yeah. Yeah. That's a cool way to do it too. But there's a switch. Yeah, there's a switch. Yeah. Yeah. So if anybody needs to, you don't need to do it with the command holiday where you can just come into here and switch. I'm also real close to having a hot key for it. So you don't even have to hunt in the styles pane and just be like a little switch in the keyboard. Same thing with 3D motion. Awesome. Sorry, my son. No problem. Well, it feels like we're dying down. I feel like some of our takeaways are if it's a list, put list in the name. So that's a good place to start. Just easy for everything to become a list. Have your HTML be as close as it can be descriptive of the what if it can. So that way it's not in the name of the class name. It's not in the presentation tier of things in the CSS. It's in the structure of things. And yeah, I think, and yeah, don't feel bad if you have if you struggle with naming things, because it's not easy. And I think that what we said, and it's a decision you have to make, but whether and just just like we have here with the just for gap and the track list is two potential names that, you know, maybe just for gap, we wouldn't want to go with necessarily, but it's telling us what it's doing. We're using that just so we can have a gap on stuff versus the track list, which is more this is my track list. And just deciding on that front, which approach you want to go with. And I think having some consistency there is probably a good thing. And then I think another thing that's very useful in talking about people, you know, when you're coding things out very early on, it's easy just to sort of dive into the project and just tackle one thing at a time and work your way through it. I think, and this is, when you get to the other extreme where it's like you're working with a full on design system, obviously early on when you're learning, you're not necessarily there, but you're like take stock of everything. So like when you're looking at your layout, let's say you have a layout like this, like you're not just doing this and then going down to this next section, like take stock of everything you have and see what parts of it are going to be more unique and what parts of it are going to be broken off more. And if you can talk with your designers or if you have a team of people that discussions can go up, I think that's probably the best thing. And it leads to sort of what we're going through, where we're looking at stuff and talking and trying to come up with names that we think make sense. I think you end up with better decisions. But if you are just you're learning, you're in the early stages, just, you know, don't just try and look at one thing on its own. See, you know, even this image in this image, well, I guess this one has a little thing that they're I don't know, maybe not the best example, but we do have this weird green little border thing that's coming up on several places within their layout. So that might be something that you oh, I can have something that's going to add that and maybe add some directionality to it or something the same way you might have something for shadows that come up and disappear depending on the layout or something. But just make sure you don't look like trying to focus on what you're building as much as possible and not narrowing down too much. And think a little bit like you said on, you know, if it's quit, you know, does calling something two columns make sense when it's not really two columns, it's can be two columns, but it's not always going to be two columns. And yeah, just taking trying to think about all of those things and figuring out all of that. And it's not easy. Yeah, it's not easy and be open minded. You know, don't be excited or willing to spend time to name other parts of your application, but not this one. You can this skill is something that you can grow over time just like you do your other things. And it'll be easier as you practice. That's kind of why I wanted to do this with Kevin is I knew this was a weakness I had. I never got taught it. I can see it continuing to proliferate across our front ends. And it's something that we can all work better on. I blog about it too. If you feel like you're coming up with names for certain things that other people just blog maybe that you can start a trend of better names of stuff. Yeah, your cascade layers might be able to help too. So you can kind of try those see if those help you out blog about what's helping you there. Yeah. One question just came in asking about how because of things like scope styling with astro and spelt and other things from Brian, I think it just passes the question off to what do you name your component versus what are you naming your class? So it's not I don't you know, you still need to name at least that main thing if nothing else. Yeah, that happens to me and yeah, and anything where the naming gets obfuscated, like if it turns into a robo class name, that means that's actually kind of liberating in a new way, which means the name that you give it at author time is a breadcrumb. Think about it more like comments and intent and helping you and whoever follows your code later won't have to worry about naming collisions, but they will want to learn while they're reading your code if it's felt they're going to pop in and skip your script and go into the html and they're going to want to learn as much as they can from that html and you can leave little crumbs there for them and they can follow the class name down to the style of rule down to bottom and learn more and modify it however they need anyway. Yeah, that's I still think a lot of the concerns of legibility think about future you coming back to this, what would you like to see as you return here? Would you like to see thingy and container or would you like to see something that mentions a list, etc. Yeah. I see just before I let you go, I saw one person just Sebastian mentioning naming, he had workmates calling things A, B, C and D, etc. That was one thing when I was teaching in the classroom that I was pretty lenient with the class names people came up with, but when they did that or they had box one, box two, box three, box four, that didn't get through. Put a little thought into this because you're going to hate yourself if you continue down this path. As long as you can get to that next step where you're giving it some sort of meaningful name, I think we're okay, but that hopefully avoiding anything like that because circling back to what we started with, if you tried doing a function A and a function B, any function C in your JavaScript, I don't think that's going to pass the code review. So that's actually a fun challenge. I would like you to tweet at me with your annoying JavaScript snippet that is poorly named that you know would just, just make someone upset. Just like, just, you know what you, it's like, no, I didn't know. I don't have the skill to name this function. As soon as you tell people you don't know anything on Twitter, they're all going to tell you what you should know. So it should be quite entertaining. Nice. I like that. So I just want to say thank you so much for, for coming to join you for this. It was a lot of fun. I think we made, got some clarity on some things and we're still not 100% sure on others, but that's part of the fun of all of this. And you give me a lot of your time. So I really, I appreciate that very much. And thanks for everyone in the chat who came to hang out with us for so long. Yeah, sorry, I wasn't, my eye wasn't as closely looking at the chat. So if I missed any stuff along the way, I apologize. But yeah, thanks for, for coming and hanging out with us. Actually, I forgot I have, I think I pushed that. Is it going to work? It did work. Cool. I added a thing to my stream deck to link to your site and your Twitter and stuff. So I forgot about it completely. But yeah, make sure you follow Adam and, and everywhere you can. People always ask me how I keep up with CSS and all the new stuff coming out. So a lot of it is seeing the stuff that Adam tweets about because he's always on the cutting edge and, and showing cool demos and stuff of, of what's going to be possible and what is possible and stuff. So definitely give Adam a follow if you enjoy CSS, which I'm hoping you do if you're here. Thanks a bunch. I got a lot of homework. I feel like I want to go study this topic more and sit down with like designers and just more people and get more perspectives in this topic. I feel like my skill level here has space to grow very clearly and I'd like to grow it. Yeah, that mine too. So once you've come, once you, you know, you've done your research, we can come back on and talk about it again. And hopefully we have some, some, some interesting answers and stuff along the way. But yeah, it was really good. I really enjoyed that and talking about it. So thanks for coming on. I'm going to say bye to everyone in the chat and I'm going to hit and stream. So bye everybody. See you yet. Awesome. Thank you.