Surprising Effects of CSS Shorthands

追加: 2026-05-31

[00:00:01]Welcome to Winging It, a show by Oddird about web design development and our approach to solving problems. On today's show, Miriam and I are going to discuss the surprising effects of CSS shortounds shortorthhands.

[00:00:18]Miriam, how are you? Oh my goodness.

[00:00:20]Let's start over. Too bad this is live.

[00:00:22]Miriam, how are you doing today?

[00:00:24]>> Oh, I'm all right. How are you, Stacy?

[00:00:26]>> I think I need a drink of water or something. Yeah, >> I did. Before we before we get started, >> I was going to mention that uh my name is Stacy Kermo. No P's in my name.

[00:00:41]Miriam, how many P's do you have in your name?

[00:00:44]>> I think probably at least five.

[00:00:46]>> I think Google might say five. I don't know. I saw the what I'm talking about is I think from Jake Archold. I don't know if something started before that one, but >> um if you type how many P's are in your name in the Google search bar, it might give you a surprising amount of P's in your name >> and different answers every time, which is also fun.

[00:01:09]>> That is fun. We'll have to try that with uh the kids later to see how many P's they have in their hand.

[00:01:16]>> All right, but we're not here for that today. We are here for um shorthands, CSS short hands which are both amazing and powerful and let's get into uh their surprising effects shall we?

[00:01:30]>> Yeah. Um should I go straight in? So this is some material uh that is sort of a side quest that came out of working on my course. Um the course is I think we'll have early bird seats available soon hopefully very soon.

[00:01:47]>> Not bird early Oddbird.

[00:01:50]Um, yeah, and this is sort of bonus material. Um, and we thought might make an interesting uh little stream. But, um, I'll share my screen here.

[00:02:01]>> So, a sneak peek of of the types of material, maybe some of the teaching style that you might see in the course when everyone pre-orders it, hopefully.

[00:02:18]Yeah.

[00:02:18]>> All right. Should I add to stage? Are we ready?

[00:02:21]>> Yeah, I think we're ready to go.

[00:02:23]>> Excellent.

[00:02:24]>> I should maybe have a clicker here. Um, just so I'm not looking for my keyboard as I go. So, uh, most CSS properties, uh, like say background color for example, will apply directly to any element on the page, right? And what do we mean by that? So if we look at this um if we set the background to hot pink for example, uh we can look here and we'll see we can go to computed styles and we'll see all of the properties that are applied to the page.

[00:03:10]>> Can you command plus on that? Uh >> oh, I can >> inspector please. Good call.

[00:03:16]>> Thank you.

[00:03:19]>> Right.

[00:03:20]So, all of the browsers have some way of looking at the computed styles and some way of showing uh all of them or just the ones that are set explicitly. Um either way, either way, when we look here for background, we'll see a lot of different background properties, but none of them are just the background property, right? Uh but we are setting background.

[00:03:52]I might not be on the right. Uh I want to be on the canvas there.

[00:03:59]And then I'm setting the background to hot pink. Uh great. So we can find here that there is a background property, but there is no background computed style because it's not actually the property of an element. um it's something a little bit different. It's a shorthand.

[00:04:17]Um so there is a background property in CSS. It's a shorthand and it's often simpler. The shorthands are some simpler way of setting a lot of long hands at once. So any value that we set on the background shorthand uh hopping for example will be removed and replace and expand to define this whole range of background related properties. Not just the deep pink background color that we were explicit about but actually every single background property that is part of the shorthand. So we're setting the background image, the background size, the background position and so on just by setting background to deep pink. So that's the first thing to understand about background or about um shorthands is that they will always expand to set all of the subproperties that are involved in that shortorthhand. any property that we didn't explicitly set will be reset to some initial value whether or not we said anything about it. So sometimes shorthands will even reset properties that we can't set directly in the shortorthhand. So uh for example here if we say border thin solid teal we are setting the border top width the border top style the border top color. We're also setting border image which is reset only. Um there's no way to set the border image in the shortorthhand but it does get reset by the shorthand. Uh border image itself is also a shortorthhand. So then that expands out even more and we get the border image source, the border image slice, the border image width and so on and so on. So when we set border we are setting I haven't counted here but I'm just going to guess it's like in the 50s uh or something uh because it's every side and every aspect of every border all of that every time we use the border shortorthhand there's a lot going on behind shorthands so that might feel risky uh if we're just trying to make like little adjustments and we don't want to override everything, but it's also extremely useful if we do want a fresh start. Um, shorthands are there to sort of start over and wipe away everything else and uh ensure that if this property applies uh it applies cleanly, it applies as a fresh start.

[00:07:09]it's not combined with something else that was already there.

[00:07:13]So, this sort of works to determine uh what level we should use. I'm going to go to uh this demo here.

[00:07:26]So, uh when we're thinking do I want to use the long hand or the shortand we have to think about well what is it that we're trying to do? Am I trying to make slight changes to what's already there?

[00:07:40]Then I might want to be very specific about like border block end style. Um, and just change that.

[00:07:50]Uh, and I'm only changing one thing. I'm not changing the width. I'm not changing the color. I'm not changing any of the other sides. I'm being very explicit about what I'm trying to do. Um, border block end.

[00:08:05]Uh, this is the same thing but a little bit more shorthanded. So, border block end, I'm setting the style and the width and the image. Everything to do with the border block end.

[00:08:20]Um, or I could go a little farther and set it on all sides.

[00:08:27]Or I could go the whole way and start over, which is going to override also the color, also the um I'm only setting a style, but it'll override the the color and the uh width as well. Right? So, when I'm creating a new border, I want to think, well, am I trying to create something new from scratch or am I trying to adjust what's already there? And that's the basics for how I choose one or the other.

[00:09:02]Uh when I'm wondering if I should shorthand or longhand, all of this happens before the cascade.

[00:09:08]So this is in the first step of the value resolution process, what we call filtering, which is where we're finding all of the relevant stuff to apply because in CSS, every pro every element has all these properties, right? Um, and all that we're doing is uh setting those properties. Uh, it's almost like a config file. Like every element has its config and we get to come in and set the config and then um the browser has to figure out how to apply that config, how to render a page based on the config that gets set. And so these first three steps filtering, cascading and defaulting ensure that we have a full a complete config file for every property on every element. And then the final three steps are the browser figuring out how do we apply that resolving formatting and constraining applying our configuration. Um filtering is sort of finding everything that's relevant. Like we go out and we say okay for this element what styles have been defined, what's out there? what applies. Um, and this is the stage at which we're looking at like a button and we're looking at its background and we have to go find its background image and its background image position and it's etc etc etc. So um that happens uh with normal properties we then cascade. So we've done the filtering, then we're cascading. With normal properties, we'll only get a conflict in the cascade when we've set the same property multiple times. Um, so in this case, the display is set twice. So there will be a conflict there and uh display flex will win because it comes later.

[00:11:01]They're the same specificity, they're the same origin, they're the same scope, etc., etc. Uh, but the cascade will find us a winner.

[00:11:10]Um, but the color property here is only set once. No competition. It wins the cascade. But shorthand properties are a little bit different. They don't just conflict with each other um with declarations of the same shortorthhand. We don't only have a conflict here between border and border.

[00:11:28]We have a conflict with all three after they're expanded. So first they expand in place. So each of those long hands becomes all of the short other way around each of those short hands becomes all of the long hands setting all of the relevant subpropies and then each of those will cascade.

[00:11:50]So uh now we find a winner between our border top styles and our border top widths and our border top colors. Right?

[00:12:03]So, uh, that means the short hand here, um, will override any previous long hands. It's going to it's going to win the C cascade across the board even though it's a separate property in CSS. Is that making sense?

[00:12:22]>> It makes sense. And it is so much more like potentially dangerous than I've ever really thought shorthands to be or also beneficial if you are trying to override everything and reset it.

[00:12:34]>> Right. Yeah. That's why I think about it that way instead of like what's going to I don't know just give me the result I want or something uh in the immediate.

[00:12:47]It's sort of like how do these things how are they going to interact? Am I trying to start over? Do I want this to apply as a new thing or uh or not apply as a new thing?

[00:13:00]So it can be useful sometimes to combine them because sometimes we want to start over and then make little adjustments.

[00:13:07]Um so this can be really helpful sometime but we have to be careful about the order that we do it. So we can say okay uh I can't use a border image. I can't set border image in the shorthand, but I can use the shorthand to get myself the basics that I'm looking for, that thick solid border.

[00:13:30]So, I'll just get that in place.

[00:13:33]Uh, even though there's no border image yet. And maybe I could even say let's pick one of the colors so that we have uh that works on its own. But then we're going to add a border image to make it a little bit more interesting. So it can be useful to start over and then make adjustments after the fact. We just when we do that need to be careful that the adjustments come after the starting over, right? Cuz that shorthand gives us a clean slate.

[00:14:08]Um so I find this a really useful pattern and I use it quite a bit. uh always just making sure that the shortand comes first, gives me a clean slate and then I can uh add to it from there.

[00:14:28]So part of how I'm thinking about that um is how should this cascade with other borders? If there's borders set in other places in the stylesheet, do I want to merge with them in some subtle way? Do I want to set one little bit of something and combine with other properties? So, or other styles. So, for example, if I'm styling a button and there might be different button states out there, but I'm setting the default. Um, do I want this to combine with other states or do I want it to or like I'm setting one of the I'm setting uh hover but there's also a active or uh Arya toggled. What is that uh word I'm looking Arya pressed? That's the one. There's going to be multiple of these states. Do I want the state that I'm working on to override other states or do I want it to combine with other states? If I want to override other states um in the cascade or like either mine will win or lose um then I'll use a short hand. But if I want sort of a more subtle interaction, a more subtle combination of states, then I'll use a long hand for that. So, that's how I'm thinking about it when uh I want to use when I'm deciding to use a short hand or a long hand. Am I starting over or am I adjusting details? It's not just about which one feels more readable to me in the moment. Um there are good reasons to sometimes set background to a color and there are good reasons to other times set background color. Um but those have sort of a different purpose to them even if they are sort of on the surface level doing the same thing.

[00:16:28]So um just quickly showing that here uh we've got a gradient um this background exists.

[00:16:42]If I wanted to uh just change the color and leave the gradient in place, um I can do that. That's sort of like now these two selectors have this subtle interaction which can be really powerful. That's a powerful option in CSS. But if I don't want that subtle interaction and I just want one of these to win or the other one to win um now because they both set the shortand whichever one wins the cascade I get that entire background.

[00:17:18]Right?

[00:17:20]So I think both of those are really useful things to be able to do. um but not something that we always think about and something that could easily surprise us uh if we're not thinking about it. Um because once again, and this is sort of the basis of the whole course is that how we write a style in CSS can have a big impact on the outcome. Um we're always having to think about uh these sort of multiple interactions because CSS is trying to solve a difficult problem. Um, and there's a reason we have six different ways to center a div because center is not a simple thing.

[00:17:59]It's like lots of different ideas um that can result in centering and lots of different um ways that centering should behave in different situations.

[00:18:10]And so we need that level of complexity and nuance to be able to communicate to the browser what it is that we're trying to do.

[00:18:21]That's what I've got for the initial uh bit here. Um happy to chat more about it.

[00:18:29]>> Yeah, there um there's certain shorthands I almost never use. Like I don't think I ever use font shorthand.

[00:18:39]Do you find yourself um not not necessarily on purpose, but like which shorthands I border? Yes, all the time.

[00:18:49]>> Right. Um, I think people probably use text decoration shorthand a lot.

[00:18:55]>> Background. Background is a common one I would use.

[00:18:57]>> Background, right? Are there ones you almost always use?

[00:19:03]>> Um, >> border background. It's It's making me think that uh it would make sense for me to use the font shortorthhand more, but I would mainly only use it on sort of like roots of a thing, >> right?

[00:19:20]>> Um yeah, maybe sometimes there's a nested root in some way, but >> in all of our setup.

[00:19:27]>> Yeah, exactly.

[00:19:29]>> But it would make sense to do there.

[00:19:32]Except I'm not even sure if that's true because there's a just with font there's a lot of nuances that I want to be inheriting or keeping around or um I'm not often starting over with my typography. I'm often making little adjustments. I also find it like shortands are a little harder to search sometimes if you're looking like specifically for font weight or whatnot.

[00:19:57]Like it's it's not as easily findable.

[00:20:00]Um, so I tend to use long hands quite often, probably more than I need to. Um, but it is nice that I know exactly what it's doing. Um, even though I didn't really even think about all these other like border image properties that I am completely overlooking when I just said the border. Yeah, it was part of what led me to to want to make this little sort of aside bonus material um was that I've seen a lot of people pushing to like never use short hands or avoid shorthands because they have uh all these other impacts and be or because uh long hands are more clear and searchable. Um, and it felt to me like that didn't match my mental model of what these are actually for. And so I wanted to to capture that and look at like, well, wait, is there some other reason that we should be considering whether the long or the short hand is right here. So like some seem way more obvious like margin and padding. It's just because it kind of does the same thing just with different sides. But then you have some like transition which is a whole list of properties that might have some effect that you don't maybe think about overwriting especially if it's coming from somewhere else in some other part that you didn't write or from a library and then all of a sudden you're like why isn't that working anymore?

[00:21:30]>> Well and I think that one is slightly different because transition is a list but I don't think it's a shorthand.

[00:21:37]>> Oh it is >> but there's no longhand versions of it.

[00:21:41]Right. You just have sort of like background image like background image uh you or no not background image but like um uh oh it is background image.

[00:21:54]You can set a list of background images and they stack on top of each other but you can't set each one individually. So there's no longhand >> but you can do transition property transition behavior. Are these not all?

[00:22:05]>> Oh yeah. Yeah.

[00:22:06]>> And like delay and >> direction or whatever. I don't know all those. Each one of those has a list of its own.

[00:22:13]>> Yeah, that's right.

[00:22:14]>> Mhm.

[00:22:15]>> Yeah, you're right.

[00:22:16]>> Okay. I was like, "Oh my gosh, I don't know CSS and I'm not a CSS show."

[00:22:20]>> No. Yeah. No, there's just a little bit of a confusion there with like list properties are slightly different from shortorthhands. But that one is both.

[00:22:29]>> Yes.

[00:22:31]All right. What about We got a question here which I think uh I I don't know if you want to dive into or not. uh from May >> May.

[00:22:44]>> Yes. Um I'm gonna just read this. This might be too specific, but I'm wondering if you can shed some light on how shorthands interact with CSS variable values. As far as I understand, shorthands normally get parsed into long hands before cascading. But this isn't possible with CSS variables because they can be substituted with anything after the cascade.

[00:23:08]Yeah. Um, it looks like there's a good article. I wish I had included this.

[00:23:14]>> Can I add it to the stage?

[00:23:16]>> Yeah, go for it.

[00:23:17]>> Okay.

[00:23:18]>> Um, maybe I'll go back and and add this uh because I think it's a good point. Um, uh, this is an article by Manuel Matusvich.

[00:23:32]Uh, >> yours looks way different than mine.

[00:23:35]What is your browser doing to this site?

[00:23:39]>> Uh, I didn't go to the link you shared.

[00:23:41]>> Oh, you're on the other. Oh, okay.

[00:23:43]Gotcha.

[00:23:44]>> CSS tricks have reposted this article.

[00:23:47]>> Oh, it just quoted tweet. Yes.

[00:23:50]>> Yes. Good point.

[00:23:51]>> So, I clicked through to the original article here. Um but yeah, and part of the reason that I didn't dive into um variables here is because I'm sort of dealing with them separately because they've got a lot of interesting behaviors with a lot of the different steps of that value resolution process filtering and cascading and so on. Um but this is a really good uh what happens is so we talked about certain things happen at the filtering step and at the cascading step and so on. The problem is that variables don't swap in until late in the process. So at the point where variables have been swapped into place um I think that's uh right before Let's see. It's filtering, cascading, defaulting, and then I think it's at the resol right before the resolving stage that variables would get swapped in. Um, and at that point, uh, the cascades already happened. So, we have this problem where if we put a variable in a shorthand, it has no way to know which long hands are being defined when we get to the cascade. So it can't expand early. It can't cascade with the other uh properties the way we would expect.

[00:25:20]Um so it has a little bit of a special behavior.

[00:25:24]Um so if we've got an invalid here's what I think. I haven't read this article in a while, but what I would expect to happen because we have this invalid at computed value time behavior for custom properties, which means we get there at the end, we swap in the value of the variable and we find out it was invalid all along. We were supposed to filter it out earlier. Earlier, we filtered out anything that was obviously invalid. So, if we set the color to Stacy, and Stacy isn't a color. It is a great color.

[00:26:03]>> It's a great non-color, >> but we set the we set the color to Stacy. Um, normally the browser would throw that out before the cascade and just say that's not a color that we recognize. Um, we don't need to pay attention to it, so we'll we'll pick a different color in the cascade as the winner. Um, but if we use the variable Stacy and we don't know what's inside of it and it turns out to be 2.5 m uh, and not a color at all, then we've already finished the cascade. It's won the cascade. The cas the cascade says that the color should be d-stacy and that's 2.5 m and that's meaningless.

[00:26:46]And so we get this invalid at computed value time behavior which is this late resolving variable behavior where suddenly we override everything uh with initial values for just absolutely everything.

[00:27:02]So Manuel's point is that uh if we do that and we get this invalid behavior in a shortorthhand, we're going to override and get the initial values uh on uh every single property. I think that's the idea here. Um and I think it's it's a it's a good risk to understand. I would say maybe there's still reasons to think of it in terms of well if we're if we're trying to start over um maybe it's the right behavior but I don't know it it would maybe take some testing. We could live code and play with it. Um but >> what are we waiting for? Let's do it.

[00:27:55]>> What are we waiting for?

[00:27:57]>> Yeah, let's wing it.

[00:27:58]>> Just let's wing it. Okay. Pen. Oh, not that.

[00:28:05]I can't type. pen new.

[00:28:11]One of my most used links.

[00:28:15]Uh, okay. So, let's give ourselves a button.

[00:28:21]>> You should uh add that to your stream deck. I think I have uh one I think is one of my buttons.

[00:28:29]>> That's good. Let's just get um instead of zooming in on the page, I'll do a uh zoom two.

[00:28:38]>> Cool.

[00:28:40]>> On HTML.

[00:28:41]>> Excellent.

[00:28:42]>> Make that a little bigger.

[00:28:46]All right.

[00:28:47]>> You know your audience.

[00:28:49]>> Yes.

[00:28:52]All right. So, what do I need here to test this? I need a variable.

[00:28:57]Um, the variable is going to be a color maybe. So, we can say um background is our variable.

[00:29:21]and see that that's working. All right.

[00:29:26]And then I suppose we could say like maybe there's a background image that's a linear gradient.

[00:29:38]Um from with like uh let's just use some not fully opaque background and then to a transparent.

[00:30:02]Okay, so we've got this gradient that's a little muddy. I I could I could use some help with the design here. I don't uh feel great about it, but okay. So now what happens if this becomes invalid?

[00:30:24]>> Kept the image.

[00:30:25]>> Kept the image.

[00:30:27]>> Background defaults to initial >> or whatever.

[00:30:33]>> Oh yeah. It's not button.

[00:30:35]>> Yeah. Are there other >> But is button does button have a a background as a user agent?

[00:30:44]style. So they have like that gray that super light gray. So appearance none maybe or would that work >> or uh Yeah.

[00:30:56]>> Yeah. So is it getting that gray? I guess it is right.

[00:31:08]Uh >> I don't know if that >> I can't tell because of our gradient.

[00:31:13]And because the >> default >> you want to you want to see it without the gradient.

[00:31:20]>> Yeah, maybe. And then maybe inspect to see like what's the background like what's the computed value of the background?

[00:31:35]Computed value of the background.

[00:31:40]Background color transparent.

[00:31:42]>> Transparent. Yep.

[00:31:47]>> So, >> okay.

[00:31:48]>> Uh we are um that is resetting the background and it's also actually setting our um we're we're getting initial values that are overriding the browser styles.

[00:32:06]Yes.

[00:32:07]>> Because we have an invalid variable.

[00:32:10]But I don't know, am I missing part of what this is about? Um uh and then I think at the end he mentioned if you have the fall back there, you're safe.

[00:32:25]>> Yeah. Okay.

[00:32:26]>> But uh but is that true? Like what if if well yeah it will go to the if the if the variable is declared and it's invalid will go back to the back or the fallback or does it try to use 30 mms as the color because there is a variable there.

[00:32:47]>> Oh right. Yeah. No, it will it will not use our fallback here if the variable is invalid. It will only use that fallback if the variable's >> we don't have an variable. Right. Yeah.

[00:32:59]>> Yeah.

[00:33:03]So uh yeah that fallback will help you with one case but not with both cases and like let's say and uh for learning purposes if you had background above it it's not going to use that because that was already passed by on that filtering. So, it's going to say, okay, we're going to go with the cascade. The later value wins there, even though the later value is using the custom property that isn't either defined or that isn't valid. So, that won't work if you're trying to create a fallback or a double fallback um for this.

[00:33:47]>> Yeah.

[00:33:52]I I uh Yeah, I like I like our colors here.

[00:33:58]>> I I saw that. That's an interesting color.

[00:34:02]>> Uh yeah, I I sort of I I get the point of this. There's some interesting interactions here with um with variables.

[00:34:13]Uh I'm a little less convinced that there's a simple rule that we can take away from this. Um it seems like we should we should understand how these interactions work and then it's going to influence the decisions that we make. Um but yeah, I also think about like if I'm defining a variable sort of right there or something. Um what are the chances it's undefined?

[00:34:46]Uh they're low.

[00:34:48]>> Yeah.

[00:34:48]>> Um so the fallback maybe isn't a solution. I don't know. Like there's certain things that are just bugs in our code that we have to watch for and fix.

[00:34:58]Um like we can't we can't plan for every bug uh besides looking for bugs and fixing them.

[00:35:08]Yeah, I would I would definitely not think of not using custom properties here, whether it's longhand or shorthand. I would just think if something's not how you expect it to be, there's probably some investigation to do. Um >> I'm trying to think. But the point here would be that uh well what I mean >> define your variables >> like >> name your variables so you know what to what value >> type to use. Yeah. But I mean like um if I had some I don't or background position that's just called background position right uh right I had some other property there uh and that's maybe not the one I mean it should really be this one.

[00:36:13]>> Yeah. something you could easily test and see.

[00:36:18]>> Yeah, I'm I'm overwriting it either way.

[00:36:23]So, I'm not sure that there's like the important thing to understand here is that background overrides background image. Um, and if background isn't valid, it's still going to override background image. I don't know.

[00:36:46]Um, I guess the question would be like if this also has some other um part to it. Not sure to live code that right away, but Yeah.

[00:37:09]So, use shorthands later on in your projects if you're confident that you don't want to override something.

[00:37:17]>> Yeah. Or if I'm if I'm creating I mean I think of it mainly with like I'm making states that are going to interact, right? Like sometimes I'm setting I'm defining this class and I'm defining this class and sometimes both of them are going to apply, right?

[00:37:33]Then I'm deciding when both classes apply, do I want one winner or do I want some interaction?

[00:37:43]Um, if I want one winner, then I can use the shorthand to ensure that whichever one wins it takes over completely. Um, but if I want them to interact subtly, then I should use longhands to make sure that each one is leaving open the possibility of other styles um getting getting added to the mix.

[00:38:13]And if you just don't want to write as much as a longhand would be, put those CSS variables when you define that shorthand like define each thing as a separate CSS custom property. And so later on if you only well yeah if you're going to change the color you could just say instead of saying like border top color um you could just do dash dash whatever your properly named CSS variable is and have a shorter way to write that depending on how you name your variables. Those could be very long.

[00:38:51]So maybe that's not a winner. Now, for the people who care about like CSS length and long hands take up more space, like that's really not a good argument for for this, right? I mean, we have things that can compress everything and >> yeah, >> it'll be minimal.

[00:39:12]>> CSS there there are ways if you try to use CSS to like crash a browser or something, you can figure it out. Um, >> I've never seen it, but I mean that's that would be a lot of CSS.

[00:39:26]>> Yeah. Well, yeah, especially if you're trying to do it on the just through force of lines of code. I remember there used to be some limit in like Internet Explorer 6 or something, right? Um, but I don't know like yeah, CSS is not likely to be where you're causing your biggest issues. Um, >> we have another question here. Tobias asks, "Does >> shortand resolved?"

[00:39:53]>> Go ahead, read it out loud for the people listening.

[00:39:57]>> Yeah. Does a short hand resolve to long hands directly or do some shorthands resolve to longer shorthands first? Um, yeah, they well there's in some ways no difference between those. Um so they do like the way it's written in the spec uh is the way it's written in the spec is that uh they resolve to longer shorthands but then those resolve and all of that resolving happens before anything else happens. So practically there's no difference between those two things, right? Uh either way we get to all of the longhands before we move on to the cascade. Um but in the spec you'll find like yeah uh background or or border uh sets the border image and then border image sets a bunch of other things. So um there's a sort of shorthand way of writing what longh hands are going to be impacted but it's going to get to all the longhands before it goes to the cascade.

[00:41:06]Cool. I think I could sum this up. What what you often say with poetic CSS is like write what you mean.

[00:41:15]>> If you don't necessarily need to reset everything, write border image as opposed to border.

[00:41:22]But if you think you need the clean start and then then do the shorthand, but otherwise CSS very declarative, expressive, write what you mean.

[00:41:34]>> Write what you mean. There's there's different ways to do different things so that we can be more expressive.

[00:41:42]>> Great.

[00:41:42]>> That's it.

[00:41:44]>> Okay. Is there anything else we should uh discuss here or can we head out a bit early today? I think that's two in a row.

[00:41:55]>> Great.

[00:41:55]>> Let us know if you all like a shorter winging it. I still would like to try to condense this into 25 minutes. Um we'll see. We'll see. We just have to not talk about it after we after we show the thing, you know.

[00:42:08]>> Yeah.

[00:42:09]>> No conversations. No winging it. None of the winging it in the winging it.

[00:42:13]>> Oh, yeah. I guess if we cut it off before the demo, that was probably around there. I think the demo is important. Okay. I'm undecided on that.

[00:42:21]But, um, so we gave you a little teeny tiny taste of some of the content you might see in the poetic CSS video course. Miriam, is there anything more we want to say about that? I know we announced pre-sales, pre early bird.

[00:42:39]>> Yeah, we're gonna have early bird sales soon. Um, the course is really trying to answer questions about uh how do we organize our CSS? How do we understand the code that we're writing? Um even in a world where some people are writing their code with uh generative LLMs whatever um the part that it can't do is understanding how CSS works and is organized. Um and it tends to write more code than you want. So understanding where that can cause problems and how to remove code and how to debug and what is CSS actually doing. Um so we're not learning every lang or every word in the dictionary. We're learning how sentences are structured. Um organizing conventions, naming conventions, and how they come out of how the language works.

[00:43:40]So well said.

[00:43:43]So well said. and it won't give you the right amount of peas. So, visit oddbird.netwingit for any show not show notes today. There is a course URL, right? There's like >> odd here it is in the comments. I don't know how to put it on the screen.

[00:44:02]>> That's your job.

[00:44:03]>> Well, let's just uh do that.

[00:44:05]>> There you go.

[00:44:07]>> We'll put that in the show notes as well. odd.netcoursespoetic-css.

[00:44:09]netcourses/poetic-css not. Yeah, dash. Okay. Uh, let us know what you want to hear on the next winging it coming up next month. Uh, if you'd like to support us, please like and subscribe. And if you want more from OddBird, be sure to check out our newsletter at oddbird.net news. Thank you, Miriam, for joining me today. Thank you.

[00:44:37]>> Uh remember, best practice is a conversation, so let's keep talking.

[00:44:42]Bye.

[00:44:44]See you.