5.1 Scoped Styles

Hello, and welcome back to the future of CSS. In this lesson, we're gonna talk about scoped styles, and it's just what it sounds like. This is the idea of keeping your styles, your CSS styles, within a particular scope, and this lesson is gonna come with a little bit of a disclaimer. If some of the ideas that I show you in this lesson seem like a little bit of a bad idea, I'm absolutely going to agree with you. Because I don't really like the idea of putting our styles inside our HTML markup. And that's kind of what we're going to be doing. This is going to be kind of a cleaned up version of inline styles. Having said that, I can definitely see a use for scoped styles in the development process. Let's say that you have multiple developers working on a site and you haven't centralized your CSS yet, and maybe you have one particular piece of one particular page that needs to be styled a certain way, but you don't wanna mess with the markup. Maybe somebody else worked on the markup and you need to apply some styles to a specific section and you're gonna let somebody else take care of globalizing all the styles later on, then I can see a use for this particular approach. However, for the most part, I like to keep all my styles separately. Now I don't even really like to put them in the head of my document as I've done here. I like to keep them in a separate style sheet as I've mentioned before. I'm only doing it in this course to keep our file structure nice and simple. So that we can do all of this in one file. So, what we're going to do is we're going to discuss another feature of the current draft, the level-four specification called scoped styles. And the idea is that we can apply some global styles to a page, but then we can also apply some locally scoped styles that will overwrite those global styles. So I'm starting with a file in your Project Files folder called scoped styles start.html. And, we can see what this page looks like in Firefox. You'll notice I'm not using Chrome this time because this is not currently supported in Chrome at the time of this recording. I believe it was supported in Chrome in previous versions, but right now, it's currently not. But as always, if you want to see the latest status of whether or not you can use a particular set of styles, you can always go to caniuse.com. And on that site you will see the current, at the time of this recording, the idea of scope styles is really only supported in Firefox. So, I'm in Firefox and we have two different paragraphs. One with global styles supplied to it and one with that's going to have some scoped styles applied to it. So let's jump back into our code and see what that looks like. So, I'm gonna jump into brackets. And, you'll see that we have two different divs, with a class of content. The first one has an h1 and a paragraph and the h1 says global styles. And our second one is pretty much identical except it has an h3 instead of an h1. So what I want to do, is first of all let's say that we just want all of the links on our site for some reason to be green, so I'm gonna set the a tag or the anchor tag color to be green. So we'll save that, jump back into Firefox and refresh. Now we can see that all of our links are green. Now let's say that just for this particular section, you wanted those links to be red. Now the first thing that might jump into your mind is, well, why don't we just give that section a different class, or, I'm sorry, this section down here, why not give it another class and then target that class and make it green? Naturally that's the way a lot of people would do it. But if you don't want to mess with the markup for now, maybe somebody else is working on the html and you're working on the CSS, maybe you temporarily want to put your styles inside this particular section, until somebody else decides what they're going to do with them and how they're going to globalize those styles. So I'm going to temporarily put an opening and closing style tag inside this content section, and in the style tag we're gonna set the color of our links to red. Now, this still isn't gonna get us quite what we're looking for. If I were to save this, and let's actually save this as Scoped styles.html. I'm going to take away the -start. And now that's saved, we'll go back to our browser and get rid of the hyphen start here. Now you'll see that all of our links are red. So, whatever styles we put inside our document have overridden the styles that were in the head of our document. So, if we want to scope these styles to the div class that they're contained in, all we need to do is add a scoped attribute to the style tag. We don't set that attribute equal to anything, we just type the word scoped, and the way that this works is, anything inside the parent element of the scoped styles takes on any rules or styles that are inside that style element. In other words, since this div is the parent of that style. The anything inside this div is going to take on any styles that we put inside this style element. So let's see if that works. We'll save our file again, switch back over to our browser, and refresh, and sure enough now just the links that are inside that particular element. That second div. Only the links that are inside that one have been turned red. All of the other links have taken on the global styles that we applied in the head of our document. So that's how scoped styles works. Again, I would frown on using this for a production website. Once you get it in production, I prefer to have all of my styles external to the HTML. But I can definitely see some value in maybe using some scope styles temporarily. You can obviously argue one way or the other. I'll let you do what you want with it, but those are my thoughts. Anyways, that's how scope styles work in the current draft of the level four specification. Thank you for watching, and I'll see you in the next lesson.