Locally Scoped Custom Properties

[00:00:00]
>> Kevin Powell: We've talked a lot about custom properties and set up a lot of custom properties. One thing is, especially right now, we have our primitives and then we have the semantic ones, and do we really need both? We'll look a bit about the benefits of that. Another thing I'm very partial for doing is using locally scoped custom properties as well, and with wrappers is one of the places I do like using them.

[00:00:20]
With the wrapper, the benefits aren't necessarily as big as within other areas. But I like doing this just because when you're modifying things or changing things, I find it's a lot easier for people when they're coming through the code to know exactly what they're doing. And I see locally scoped custom properties a lot like Levers that you're opening up within the code for somebody to be able to come in and change.

[00:00:44]
You're saying, sort of anything that has that locally scoped custom property is something within this thing that is allowed to be tweaked, and those other things should be left alone. So in this example, we could come here and say, wrapper max width is 1130, and then in the modifier down here, I would just modify that custom property, so wrapper max width.

[00:01:10]
And then, of course, this here would have to get changed to the variable, var(--wrapper--max-width, like that. You could also not declare the custom property here and put the fallback value here. There are times when that can be beneficial, and I would say it's a good thing to do.

[00:01:31]
We'll see examples of that a little bit later, but I'm kind of partial to doing it this way. And so then for the narrow one, we could take the same approach, data--width is equal to narrow. And here we can say the wrapper-max-width, I think it's 720 off the top of my head.

[00:01:54]
But you can double-check that in the figma file just to see what the size is actually are. I'm also getting an error right now, and I noticed when I saved my code wasn't formatting, and I can see prettier highlighting in red right now at the bottom, that means I did something wrong [LAUGH].

[00:02:10]
It could be a number of different things, sometimes it's a missing semi colon. In this case, layout, you can see the bracket has changed to red here. VS code again, default highlights brackets so that's opened, then it should be close, close, close. I think I'm missing a closing bracket here, save, and there we go.

[00:02:30]
The prettier is no longer red, and I'm just trying to make sure that this opening yellow one has a corresponding closing yellow one before I get to my next layer right there. So if ever you are using Prettier, it's been working the entire time and you do save something and the formatting doesn't happen, the same would be in the HTML.

[00:02:46]
If you have a missing or an extra closing div or something like that, you'll notice it doesn't work. If you click on Prettier here too, it will open up in this bottom area, and this is all my settings of it, but if there's an error, it actually tells you what the error is, usually in here.

[00:03:02]
Or gives you an idea of what the problem might be, so I can help you out as well.
>> Kevin Powell: With those wrappers in place, I'll do this with you guys at the same time. I'm just gonna go through and use all the wrappers in the places I need them, and I am gonna make a change.

[00:03:21]
I was gonna save this to when we styled the hero, we're gonna get there in a bit. But because the hero area does need like this text at the top is wider, and then this text down here is narrower. It just means the easiest way to do that, in my mind, is to actually close this one here and then open up a new div with a class equals wrapper, and the data width is equal to narrow.

[00:03:55]
For the data attribute things, I'll just let you know I got that from CUBE CSS, which was by Andy Bell, I mentioned him for the reset as well. And in the first lesson I talk about the data attributes in the course website, there is a link that goes to the CUBE CSS, which is a naming convention that he uses.

[00:04:14]
That's where I got the data attribute thing from, and I just fell in love with it and continued using it. But he goes into much more detail and use cases. But again, we'll see a few of those as we go through here. So in doing that, I should be able to see.

[00:04:28]
What we'll do is actually, I wanna see my project at full screen, so I'm just gonna switch to my other desktop. So, I can see we don't have center, so looks a bit funky. But I can see this is fullscreen, and then this part down here is narrower, so I know it's working.

[00:04:46]
The next part, the wrapper is completely fine for that area, I just need it to be the normal width. This next one is narrower, so I just have to find it. There's the wrapper data width is equal to narrow. I keep putting them outside of my quotation marks, then the two columns, both of those have the data width is equal to wide.

[00:05:13]
And again, please don't feel you have to use the data attributes if you really don't like them, but I do encourage trying different things to see how they come together for you on any given project, and to see if you like it or not. So this looks good, our navigation, actually, I think needs a wide one.

[00:05:33]
There we can see it's all within our wrapper. Here we're in a wrapper that's wider, so the image is sticking off to the side of it more. We have the wide one there, and then the little happy foraging down at the bottom, which I don't think we need a wrapper for necessarily.

[00:05:49]
So I'm just gonna come all the way back up to the very top, where I have the wrapper here and, whoops, data-width = wide there, cuz, again, if we look at our design, the navigation does have the wide wrapper on it, right there.
>> Kevin Powell: Any thoughts about data attributes versus modifier classes?

[00:06:12]
I'm always curious when everyone-
>> Speaker 2: Just mentioning that Andy Bell and Hayden's book, Relearn, every layout is a great resource for responsive design focused on CSS and HTML.
>> Kevin Powell: Yes, every layout is fantastic at highly recommend it to people.
>> Kevin Powell: I try not to mention Andy too much, but I've learned a lot of CSS through him, so [LAUGH] it sneaks in quite a bit.

[00:06:40]
And Hayden has some really good resources too. Actually, [LAUGH] just a bit of talking about landmark regions, we're gonna dive into those now. Hayden has a series on his, so it's Hayden Pickering. He has a series on his blog talking in depth on what the semantics of each one means, cuz semantics are hard and it's not always easy to know what each one means, so you can check those out.

[00:07:03]
He does have a bit of a crude sense of humor to put it politely. So you have to, if you like it, if you like Monty Python and don't mind some vulgar words, you'll like his blog posts, otherwise you might not, but yeah.
>> Speaker 2: One other kind of thought or question.

[00:07:19]
Someone in the chat says, regarding data attributes, I'm wondering how or if there's a way they can be enumerated. For example, wide can be easily misspelled, can we make it more declarative in some way?
>> Kevin Powell: I don't know if there's a difference between that and modifier classes, it's just what it is I think when we're authoring these things.

[00:07:39]
But yeah, you could, I mean, yeah, I'm trying to think of an alternative, but I think it is what it is a little bit.