 We talk a lot about semantic HTML. But what about semantic CSS? They're coming up with good class names in CSS is always a bit of a struggle. It's maybe one of the more infuriating things, which is why we have so many different naming conventions and different approaches to authoring CSS, especially when it comes to organization and dealing with selectors. So we can attempt to give things meaning with names. But of course, the class name doesn't have any real meaning. It's easy to get them wrong. And well, of course, things like this would work just as well if you were to take inspiration from my son and use a class like Big Butt. Now that's probably not the best idea in the world. And people might be a little bit confused if they're working on that code base and come along the your Big Butt class there. But of course, if that class was in your HTML, that selector would work perfectly fine. But if somebody were to randomly come across it, they'd really have no idea what you're actually wanting to do with it. And that's very different from what we have with HTML where we have things like our nav or header or footer or aside, we have figures, we have all sorts of things that have actual meaning to them. And even sometimes getting those right or using them in the right way can has a little bit of wiggle room. But for the most part, it really makes our lives a lot easier. Now the semantics of those elements help convey actual meaning to the browser and assistive technologies as well. But it also makes it easy for developers to be a bit more consistent and know how things are being used. So with all of that, how can we take that idea of semantics from HTML and use them in CSS without having to go down the route of only selecting things like our nav or header or footer with element selectors. So to figure that out, we're going to jump into this example that I have up right now. And this was heavily inspired by an article that Ben Myers recently put out. So I will be linking to that in the description, I strongly recommend giving it a read. And I'll also have some other good links down in the description related to this topic that helped me put this video together. So the idea here is, this is quite a common thing that you might see we have a current page like this one. So we have, you know, a regular navigation set up with our semantic HTML. But then we have this current page here. And then of course, it highlights the page run. So we just, you know, when you go through all your different pages, you know, if I'm on my about page, I'm just moving that down to there, then I'm moving that down to there. And maybe you're using some sort of dynamic system to be able to do this with however you're authoring, you know, depends on your tech stack and all of that. But we're highlighting the current page. And if we come back to the styles here, I've just done this where I'm my nav link that has a current page, I've given it a background color, we're not doing anything fancy here. There's other ways of doing this, but a nice simple setup, we have a hover color for the regular one. And then we have this one that has the darker color. And I've boosted specificity on it to make sure that it's working. So if I hover on top of that one, we don't get the color changing. Nothing too fancy. But the one problem here is we come back to here, we've used our nav here, we've used a list here, we're using semantic elements, but we're not actually using anything semantic to link into we're not we're not giving any extra context to what the current page is, even though there is a way to do that. And the way to do that is an area current equals page. And by doing that, we're helping assistive technologies get the same hint that this is doing visually on the page right here. So right away, that's a good start. But now I have this here, and then I have the current page here. And that means if I go in that, you know, I want to do my ability page now. Well, that means I need to move this thing here over down to here. And then I also need to remove this from that link here. And I didn't move that down to the link here. And there's a lot that could potentially go wrong in having to, you know, it's extra maintenance for nothing. It's kind of annoying on that front. And this is just some random class that I've assigned to here. This could have been big, but like we mentioned before, and I can have it do the exact same thing, whereas this actually carries meaning to it. So if this actually carries meaning to it, and this is actually saying this is the current page that we're on right now, well, I could hook into that with CSS. So instead of doing nav link current page like this, I could take this, let's turn this into an attribute selector by putting some square brackets around it. Let's delete what's in there and put in my area current is equal to page and hit save on that. And now you can see that it's still working. And if we come back to here and we delete this current page from here and hit save, everything is still working perfectly fine. And what we've done here is actually create a semantic CSS selector. We're using the semantics that we had in our HTML without, you know, you could select a nav a ul things like that, but we're linking into another level of semantics. And we're bringing that in here to help style our page. And that means that things have to be done properly from an accessibility standpoint, to be able to style things. So we're sort of enforcing accessibility by doing this as well. Because now if I go to my about page, it's broken, because my about page had it the old way. And I did this the old fashioned way with just some regular old HTML on every page. So of course, then this would have to be removed and we do an area current is equal to page right here. And now that's fixed. And we have this working across our pages. And to be able to do something like this requires literally the exact same amount of work as it would have required before. The only difference is it's a few extra characters, but the advantage is we're bringing in the accessibility component of it here, and we're just hooking into that with our style sheet and how we're doing our CSS right here to look at more examples of types of things you can do with this one I've looked at many times before is using things like area expanded on buttons for styling things like a navigation, whether it's opened or closed. So if we take a look at this when you're doing it, I have my button that's right here, we have an area expanded a false on there. And when it opens, that gets switched over to true. So the JavaScript is switching that back and forth between the two of them. But that means I can hook in and I can style things from the menu being open and what the menu looks like to how my button is created and everything using those selectors right there. Another example could be down here if you have a tabs system like this where we can switch between different tabs, I could have everything controlled through my area roles here that I'm using for my tab lists and things like this that we should be setting up if we're doing things this way. So my tab list is being set up through the role. I'm not coming up with a class and having the role on there. Each tab is being styled through that my tab panel area selected is all coming together here. So when it's selected, I'm changing the style of it as I'm coming through on those. And if you're new to things like this and you're not sure about them, anytime you're looking something up, it's very easy to do a nice quick search. For example, let's say you need to make us an on off switch for something, you can just do one for a 11 y switch. And you can see I was looking that up recently, which is why it's top of mind. And you'll see lots of different things that come up on it. And you can do some further reading on it, where a lot of the time they give you code examples of what things are going to look like, including things like roles that you might need to include. So we have the role of switch that are coming on a few of these. You'll see there's no area anything, but we do have the role of switch. There's other things that do come up with these types of elements when we're trying to make interactive elements as accessible as possible. And that helps us hook into those with our CSS, and it helps us make our CSS semantic as well. And often the general rule of area is don't use area if you don't have to. So just using your nav, your head, or your foot or things like that are the right thing to do. But as soon as you are getting into more complex things, there are usually things that you need to take into account. And it is really advantageous because it makes it a lot easier to hook into because an area selected true is nice. And you know, you're not stuck thinking, do I need a tab, tab, opened or something? Or is it opened? Or do I give this active? Like what name do I give it? You don't have the whole worrying about how many you name things goes out the window. It's already handled for us. We're good to go. And if you enjoyed this video and it gave you a few thoughts, I'd really recommend checking out the articles that you can see in the description that go into a lot more detail and a few of the different patterns that you're seeing here. And if you're looking for more video content, I have looked at another accessibility issue that is I see coming up all the time, which is the misuse of heading levels in putting together websites and apps. So if you're curious about that, that video is right here for your viewing pleasure. And with that, I would really like to thank my enablers of awesome, Jan, Johnny, Michael, Patrick, Simon and Tim, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your court on the internet, just a little bit more awesome.