Day 49: layering entire style sheets

posted on December 1., 2022

It’s time to get me up to speed with modern CSS. There’s so much new in CSS that I know too little about. To change that I’ve started #100DaysOfMoreOrLessModernCSS. Why more or less modern CSS? Because some topics will be about cutting-edge features, while other stuff has been around for quite a while already, but I just have little to no experience with it.

---

You can use @import to load entire style sheets into a cascade layer.

@import url("path/to/the/styles.css") layer(layername);

For example, you could load something like Bootstrap into a dedicated third-party layer.

@layer third-party, base, components, utility;

@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css") layer(third-party);

@layer base {
  body {
    /* my custom styles */
  }
}

<button type="button" class="btn btn-primary">Primary</button>

An important thing to know when importing styles is that it matters where you put the @import rule. In the spec it says:

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset and empty @layer definitions) and must not have any other valid at-rules or style rules between it and previous @import rules, or else the @import rule is invalid.

This is invalid:

@layer third-party, base, components, utility;


@layer base {
  body {
    /* my custom styles */
  }
}

@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css") layer(third-party);

See on CodePen.

Further reading