How one can use @layer rule to beat cascading types conflicts in CSS ?

A cascade layer is said utilizing the @layer CSS at-rule, which will also be used to specify the hierarchy of priority when there are a number of cascade layers. With this, net builders have extra management over cascades on account of guidelines that layer cascades collectively. Any types that aren’t in a layer are collected and added to a single nameless layer that follows all named and nameless layers which have been declared. This suggests that no matter their stage of specificity, any types declared outdoors of a layer will take priority over these declared inside.                  

Method:

• Within the HTML file, create a HTML div and add a paragraph tag with some textual content.
• Within the CSS file, we’ll create the cascading layers utilizing the @layer CSS at-rule. 

Syntax: 

Single layer: On this, “layer-name” is the identify of a specific layer and guidelines are the checklist of the CSS guidelines for the layer.

    @layer layer-name {guidelines}

A number of layer: For outlining a number of layers, we use the above syntax and there priority is from left to proper which suggests the very best priority is to the fitting most layer.

 @layer layer-name-1, layer-name-2, layer-name-3;

Instance 1: Lets see an instance of how nameless layers priority is larger than any outlined layer. 

• Within the under instance we’ve used a paragraph tag inside a div with class “gfg-container”
• Within the CSS file we’ve written two types for the paragraph, one contained in the layer and one outdoors.
• The paragraph type outlined outdoors the layer is of upper priority than the layered merchandise type of the paragraph, so even when we write the @layer rule under the paragraph type which is outdoors, it can take the types of the skin or the nameless layer which is fashioned.
• The layer paragraph styling are utilized on account of priority order.

HTML Code:

CSS Code: The next code is the “type.css” which is used above.

Output:

@layer at-rule

Instance 2:  Allow us to see an instance with none nameless layers.

• Create a HTML file with a div containing a h1 tag with defining 2 layers.
• You’ll get an thought, that the layer identify which was outlined first has a priority worth lower than the second, so the types talked about within the second layer would override the types within the first that are widespread. The CSS coloration property was widespread, so the colour talked about within the second layer is utilized and all the opposite types of the primary layer are additionally utilized.

HTML Code:

CSS Code:

Output:

@layer at-rule priority order