This is a brief summarization of the main principles covered in [my extended post here ](https://allmaddesigns.com/css-layers-and-variables-use-case/). Check it out if you're looking to understand these concepts more fully. ## CSS Variables [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) allow you to create pre-defined CSS properties and assign their scope. ### When to Create CSS Variables When defining variables it’s important to consider how they can cut down on your development time in the future. Let’s consider this some more in the form of a design theme. For my project I want to have a masculine and feminine theme. I am going to be using background svg’s, images, border, font, and color styles to define each theme. Using CSS Variables, I can change the styles for all of my elements across the board more easily. ###Where to Define CSS Variables When defining the scope of your variables, you can set them to the **:root** object. That will ensure your variables can be used on all of the document’s elements. css variable scoping infographic shows the variable color grn being assigned to both the root and container scopes. In the linked example, the green on root is a normal green, the green assigned to the container scope is lime green. Even though the variables are the same name, they have a different scope.

css variable scoping infographic shows the variable color grn being assigned to both the root and container scopes. In the linked example, the green on root is a normal green, the green assigned to the container scope is lime green. Even though the variables are the same name, they have a different scope.

If you have variables that should only be used in certain contexts, for instance variables just for containers, then adjusting the scope of the variables to the **.container** class makes more sense. ###Example of this scoping principal in action: {% codepen https://codepen.io/all-mad-designs/pen/XWZYJOq %} ##CSS Layers With normal CSS, the only way to overwrite styles is to use a more specific selector. Or as a last resort by using the !important directive (ewwww David). With CSS Layers, you can create modules of CSS that will apply to elements under different contexts and you can also prevent writing hyper specific code or using !important when you don’t need to. ###How to Use CSS Layers CSS Layers provide you with a way to specify which styles to load and in what order. This is helpful especially if you have different stylesheets for different things. For instance, you might have a utilities stylesheet that sets the padding, margins, and button properties to given class names. During development, you only need to add those class names to your HTML to see it magically styled in front of your eyes. You could use layers to define when to load utility stylesheets like Bootstrap and Tailwind to your project. ###How to Define CSS Layers With CSS Layers, you can use shorthand in a style tag to define the layer precedence like this below. If you define this at the top of your head element, it won’t matter in what order you load your stylesheets 🎉 : ```html ``` When you first load [my codepen here](https://codepen.io/all-mad-designs/pen/VwQxxNo), you’ll see four total CSS layers applied to this site design. - layout (layer 0) - utilities (layer 1) - typography (layer 2) - femmeTheme (layer 3) If you open up the inspector tools in [Chrome 99 and up](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer#browser_compatibility) and click on the “Toggle CSS layers view” button, you can see the order in which the browser is prioritizing these layers. in the chrome inspector tools in front of the hov and cls buttons in the styles tab is a 'toggle css layers view' which allows us to see the layers and their order of precedence

in the chrome inspector tools in front of the hov and cls buttons in the styles tab is a 'toggle css layers view' which allows us to see the layers and their order of precedence

##The Femme Theme Layer and Variables In my femmeTheme layer, although the H1 element has properties defined in the typography layer, I don't need to add a class name to my H1 element to overwrite the previous styles. css styles for the h1 and header element that control color and border bottom properties

css styles for the h1 and header element that control color and border bottom properties

Similarly, I don't need to add additional specificity to the header element to adjust the border-bottom property. The CSS layer does the work for me. I’m using Javascript to replace the images, and insert an internal stylesheet into the page. => When you click the **“Change Theme”** button, you’ll see the site design change. ###What’s really going on under the hood? As you can see in the below image, I’ve used CSS Variables to re-define the properties already in use. I’ve also overwritten the H1 property a second time without having to adjust the specificity at all 😏. a JS variable whose value is a string of HTML. A style tag with a comment and CSS variables being overwritten on the all selector

a JS variable whose value is a string of HTML. A style tag with a comment and CSS variables being overwritten on the all selector

When the button is clicked, this stylesheet is inserted after the beginning of the body tag. This ensures that it will have more precedence than any of the layers that were defined before it. ##See the project here: {% codepen https://codepen.io/all-mad-designs/pen/VwQxxNo %}

css2022

CSS Variables and CSS Layers: What, When, and How?

Join Our Newsletter. No Spam, Only the good stuff.