@layer CSS At-Rule

Description

The CSS @layer at-rule is used to create a cascade layer and define the order of precedence in case of multiple cascade layers. This gives CSS authors more direct control over the cascade, so they can build more intentionally cascading systems without relying as much on heuristic assumptions that are tied to selection.

Cascade layers are a new feature in CSS, and they are not yet supported by all browsers. However, they are supported by all major browsers in their latest versions.

To use the @layer at-rule, you first need to declare your layers. This can be done at the top of your stylesheet, before the @import rule (but not between imports).

Syntax

@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

Values

layer-nameIs the name of the cascade layer.
rulesIs the set of CSS rules in the cascade layer.

Example

@layer reset;



@layer theme {

  body {

    font-family: sans-serif;

  }



  h1 {

    font-size: 2em;

  }

}



@layer layout {

  .container {

    width: 960px;

    margin: 0 auto;

  }



  .header {

    margin-bottom: 1em;

  }

}



@layer components {

  .button {

    display: inline-block;

    padding: 0.5em 1em;

    border: 1px solid #ccc;

    border-radius: 0.25em;

    background-color: #fff;

    color: #333;

    text-decoration: none;

  }

}