fbpx

CSS Layers Tutorial: Real CSS Encapsulation


Just around the corner, a new feature is rearing its head and it’s getting frontend developers excited. That feature is CSS layers. With layers, we’ll finally be able to fully encapsulate our CSS for import. That means modules, scripts, or anything else imported into your projects can have CSS that is entirely separate from your own, putting to bed the age-old problem of styles overriding each other. It will also let us be more agile with the CSS we add to our pages with custom import statements.

Let’s take a deep dive into CSS layers, and how they will work when they land in a browser near you.

Support 

CSS layers currently have no mainstream support – however, you can activate them in the flag settings in chrome, firefox, and safari. If you are using one of these browsers prior to support being added, you can activate layers as follows:

  • In Chrome, you need to go use a runtime flag from the terminal. The runtime flag is --enable-blink-features=CSSCascadeLayers.
  • In Firefox, go to about: config and activate layout.css.cascade-layers.enabled
  • In Safari, go to the experimental features dev menu to activate layers.

Up to date support can be viewed below:

So, How Do Layers Work?

Layers outcompete any other precedence within your CSS document. You may be familiar with the concept that an id # selector overrides a class. selector. Layers are stronger than any other selector – so a layer at the bottom of your document will automatically take precedence and override styles elsewhere.

Layers follow the same principle syntax as other block statements in CSS. As such, we can define a new layer like this:

@layer myLayer {

}

Everything within the curly brackets will relate to “myLayer”. As you can imagine, we can put any kind of CSS within a layer. So I could do something like this:

@layer myLayer {
    p {
        color: red;
    }
    @media screen and (min-width: 100px) {
        a { color: blue; }
    }
}

And of course, we can define multiple layers one after another, as so. You may also define anonymous layers, which have no names. Note that in the next example, #id.class will render blue, since myOtherLayer comes last, despite myLayer having a higher specificity.

@layer myLayer {
    div #id.class {
        color: red;
    }
}
@layer myOtherLayer {
    #id.class {
        color: blue;
    }
}
@layer oneMoreLayer {}
@layer {}

And finally, layers can be put into layers, and layers with the same name within the same layer or at the top level of your CSS document automatically merge:

css Copy
@layer myLayer {
    @layer mySubLayer {

    }
}

@layer myLayer {
    /* this is the same as the previous "myLayer" - CSS automatically considers them one layer */
}

Setting Layer Order Upfront 

As well as the benefits of being able to fully encapsulate your code with layers, you can tell the browser straight away in which order layers should go in. As with all things CSS, what comes last has the highest importance. So the below example gives the highest importance to styles in myLayer, meaning the selected HTML element will render red.

@layer oneMoreLayer, myOtherLayer, myLayer;
@layer myLayer {
    div #id.class {
        color: red;
    }
}
@layer myOtherLayer {
    #id.class {
        color: blue;
    }
}
@layer oneMoreLayer {}

This makes CSS ultimately so much more powerful – imagine importing a CSS library that no longer has to worry about other CSS you have in your code. It can easily insert itself to the end of your document as a single layer, which acts by itself!

Importing a Specific CSS Layer #

CSS layers also have the power to reduce the amount of CSS you import. Let’s imagine you are importing a dropdown menu into your project. You only want to import one specific set of dropdown styles. Luckily, the developers have used layers, so it’s as easy as this:

@import url('dropdown-styles.css') midnightDropdownLayer;

Now we have not only reduced the amount of CSS and subsequent file size, but we have also ensured we get a completely encapsulated piece of CSS that can be used in our project.

Conclusion 

CSS Layers are going to change how we write code and give us new features which will make encapsulation of projects really easy. Ultimately, new features like layers will fuel a whole new set of post-processing and front-end web technology which will change how we build websites today.

If you’re interested in learning a bit more, follow the links I’ve added below:



Source link

Leave a Reply

Shopping cart

0
image/svg+xml

No products in the cart.

Continue Shopping