CSS Cascade Layers Tutorial #4 - Importing Into Layers

Key Takeaways

okay then so we've seen how to make layers and put our Styles inside different layers in order of priority in a star sheet now I want to talk about how we can import CSS files directly into layers so it might be for this project that you're working on the styles are split up into several different files so we have a components file for styling different UI components like buttons and cards we have a Content file for styling the typography the links and other content like images we have a layout file for all the layout Styles a reset file full of reset Styles we've got a theme file for all those theme variables and then we've got a utils file for all the utility classes so each Star sheet then could be imported into this main.css file so that we can just load this one main stylesheet into the HTML documents and the way we import CSS files is just by saying at import and then the path name of the file so in this case reset. CSS for example and we do that for each Star sheet but if we just import them like this it would be the same as if we're just writing them all out in order in this main file and there'd be no layers there'd just be a mix of all of these different CSS selectors in this kind of global scope right ideally we'd want to put each import into its own layer and we can do so we've already defined the layers and the Order of the layers up at the top of the file and now we can just tack on the layer rule after the Imports themselves to apply the import to a specific layer in parentheses so let's do this for all the different CSS files that we've got now all right then so I'm just going to duplicate this a few times and we'll change this one right here to theme not in capitals theme and we'll change this to theme as well we'll do the same down here this one's going to be layout this one's going to be layout and by the way they don't have to be in order right here because we've already dictated the order right up here they could be jumbled up here but I'm going to keep them in the same order so it's easy to look at all right so content right here and then content right here the next one is components the components and components and then reset oops not reset it should be utility and utility this is actually called utils should have kept it the same name really anyway now we have all of our different imported CSS files being applied to a specific layer and that is the same now as writing all the layers down here like layer reset and then putting the code in here it does the same thing we're just importing from other files now all right and we can see now in the browser everything looks good as it should do it's all styled correctly so what I'm going to do just to show you that this is still working in is I'm going to rearrange this I'm going to take components where we have the button class and I'm going to place it up here somewhere so let's cut that and let's place it before theme after resets like so and now we can see the Styles have changed so the button up here isn't working this doesn't look good Etc all right so this is working we've verified that by changing the order of these so ideally we want to keep this in the right order so let's grab that and paste it over here again so then we can also import third party line inter layers within our sty sheet as well for example we might be using the Bulma CSS library in our project but if we just link to it from our HTML file then it might cause conflicts with some of our Styles instead we could import the Bulma CSS file into the main style sheet and apply a layer to it so first up we Define the Bulma layer in the position within the stack that we want to use it now with a library like Bulma which contains utility classes layout classes typography classes Etc the position of the layer is a bit less obvious it could probably go somewhere in the middle after the reset and theme but maybe before the rest that way our own custom layout content and utility classes get priority over the Bulma ones but like I said it's not so obvious and it might be you want to place it somewhere else but anyway now we've defined its position we can import the Bulma file using at import and then we just paste in the file path or you to this import and then we can apply a layer to it by saying at layer and then inside parentheses whatever the layer was called in our case Bulma and now this third party library has its own layer within our stylesheet which is awesome so there we go my friends hopefully that gives you a head start when it comes to working with Cascade layers in [Music] CSS oh