Creating Layers in CSS

Layers have been a part of CSS since its inception. By default, there are three layers that determine how CSS styles are applied to a web page. Having separate layers makes overwriting code from a previous layer super easy, and each layer has its own hierarchy that ignores specificity. The three default CSS layers are the Browser layer (otherwise known as the user agent layer), the User Styles layer, and the Author Styles layer.

The Browser layer of styles is the layer that defines the default styles that are applied to elements. The Browser layer is the reason why buttons, form input fields, and other common look different across different browsers. The browser layer gives each browser a unique look and feel.

The User Styles layer consists of custom styles that a user can inject into their browser to overwrite browser layer styles. This layer is not too common nowadays as most browsers do not support this option anymore, but there are certain settings and preferences (depending on the browser) that can be adjusted that will inject custom styles into the user layer and overwrite browser default styles.

The most common CSS layer is the Author layer. The author layer is where every piece of CSS code that a developer writes will live. If you have built any front-end web pages using CSS, then you have worked with the author layer.

The three CSS layers are ordered as listed above (Browser layer, User layer, and Author layer). This goes along with CSS’s cascading properties, as every style in a later CSS layer will override any style from a previous layer, regardless of specificity. This means that no matter how specific an element selector is in the Browser layer, even a generic selector for that element in the Author layer will override the browser styles.

It is very important to understand how CSS layering works and how styles in later layers override styles in previous layers, in order to take advantage of one of the newer features that has been introduced into CSS: a new layers API that allows you to define your own layers within the Author layer.

How Do You Create Your Own Layers?

That is a great question!

Creating our own layers in CSS is actually quite simple to do. We simply need to use the @layer keyword to create a custom layer and give it a name. The name can be anything that we want it to be. If you are familiar with the @media query and @animation API in CSS, then the syntax might look very much similar.

Let’s go ahead and walk through an example of how to create custom layers in our CSS. The code below will create two new layers: one layer called one and another layer called two. Both layers are completely separate from one another. You will notice that — much like in a media query — we write our CSS styles within curly braces {} for each layer:

@layer one {
    input#myInput.very-specific-input {
       border: 1px solid red;
       color: red;
    }
}
@layer two {
   input {
     border: 1px solid green;
     background-color: grey;
   }
}

Because each layer that we created above is separate from the previous layer, we can easily override any styles from layer one inside of layer two, no matter how specific the selector is. In the example above, even though the input element is selected by the ID of myInput and the class name of very-specific-input, any styles applied to this input will be overrode by the generic input selector in layer two.

Here is a visual representation of the hierarchy of the styles being applied to our webpage:

1. Browser (User Agent) styles
2. User defined styles
3. Author Styles
   1. one
   2. two

By creating new layers using the CSS layers API, it makes organizing out code and working with specificity so much easier.

Defining custom layers in CSS is just the very basics of how powerful this new CSS tool is for front-end developers. There is a lot of functionality that we can achieve by using custom layers in our CSS. Here some examples of the different things that we can do with custom CSS layers:

Define Layer Order

With CSS layers, you have the ability to define the order in which layers are applied to your CSS. All that we need to do to define the order of our layers is to use the @layer keyword, and then list each layer in order, in a comma-separated list. CSS will apply the layers in order, from left to right, with the last one on the right being the most specific layer.

@layer framework, base, utilities, components

Once layer order is defined, you can simply use the @layer keyword, followed by the layer name to add styles to each layer, and the order of the layers will not change since they are already defined.

Import Layers

When you are working with frameworks in vanilla CSS, you will often import them using the @import keyword, followed by the URL of the framework, like so:

@import url('./lib/bootstap.css');

Let’s say that we want to add the framework to a specific layer in our stylesheet, though. This can easily be done by adding the layer(layer-name) to the end of the @import statement, like so:

@import url('./lib/bootstap.css') layer(framework);

This will import the bootstrap.css styles and place them all in the framework layer of your stylesheet.

These are just a couple of examples of what can be done using the @layer API in CSS. There is a lot more that can be done, such as nesting layers and using anonymous layers, but these tools will likely be less common, as they are not as useful.

When using layers in CSS, there are a few important things to consider, in order to fully understand and utilize layers:

First, keep in mind that non-layered styles are considered more specific. If you have styles declared outside of an @layer, these styles will override any styles in your layers. Just think of unlayered code as code that is in a layer below all the other layers, and that it will override any declared styles in your other layers.

The next important thing to consider is the all too infamous !important flag that some developers love to use. The !important flag makes specificity and overriding previous styles difficult overall and it is no different with layers. Any style with the !important flag will override that style in any layer, no matter what order the layer is in.

The final consideration when it comes to using layers in CSS is browser support. As with any cool new feature of CSS, it is important to know which browsers support the feature, and if it is worth using that feature if it is not widely supported yet. The good news is that the CSS layers API is well supported by over 60 percent of modern browsers, and is well on its way to being fully supported across all browsers. In fact, once users update their browsers to the latest version, the CSS layers API should be supported.

In conclusion, I am super excited that CSS layers will be a feature in all browsers in a short period of time. Using CSS layers is going to really change how we organize our CSS code and help address a lot of frustrations and confusion surrounding specificity. If you have not yet, I would recommend experimenting with CSS layers and learning more about them.