A Useful Use For Cascade Layers

I used to be simply making ready a demo for an upcoming speak and it abruptly occurred to me that cascade layers can be an ideal answer to an issue I used to be having.

For any aspect of stay coding, I wish to meticulously put together my demos to stop any moments of friction on the day. I wished to use a bunch of default kinds to a grid of playing cards in this container queries demo, however I wished these kinds to look on the backside of the stylesheet, in order that when it got here to stay coding the demo I might write all of the related code on the high, and the viewers might simply deal with the structure kinds I’d be discussing. Nonetheless, there have been a number of kinds that consequently wouldn’t be utilized, as they’d have been overridden by these additional down. For instance, on the high of the CSS file I need to apply a container question that will lead to a horizontal card structure:

.grid__item-wrapper {
  container: card / inline-size;
}

@container card (inline-size > 24em) {
  .card {
    flex-direction: row;
  }

  .card img {
    width: 40%;
    flex: 1 1 auto;
  }
}

However additional down within the stylesheet I used to be setting a flex path of column on the cardboard:

.card {
  show: flex;
  flex-direction: column;
}

Container queries themselves don’t improve specificity. I might write the next, and the physique would all the time be blue:

@container structure (inline-size > 40em) {
  physique {
    background: crimson;
  }
}

physique {
  background: blue;
}

I might improve the specificity of the selector on the high of the file, however I didn’t like my probabilities of remembering to do this within the midst of a stay coding session! Cascade Layers are an ideal answer. We will specify the order of layers on the high of the file:

@layer common, structure;

Then put our related kinds inside them:

@layer structure {
  /* Solely the kinds related to the demo go on this layer */
  .grid__item-wrapper {
    container: card / inline-size;
  }

  @container card (inline-size > 24em) {
    .card {
      flex-direction: row;
    }

    .card img {
      width: 40%;
      flex: 1 1 auto;
    }
  }
}

@layer common {
  /* CSS reset and common kinds not related to the demo go right here */
}

This implies the kinds within the common layer might be utilized first, regardless of being under these within the structure layer.

Right here’s the complete demo:

See the Pen
Container queries + cascade layers by Michelle Barker (@michellebarker)
on CodePen.

Browser assist

I used to be stunned by how widespread browser assist already is for Cascade Layers — over 87% of browsers worldwide now assist them. However, evidently, an utility that depends on Cascade Layers wouldn’t fare properly in browsers that don’t assist them. Fortunately there’s a PostCSS polyfill (which I haven’t tried out but).

Caveats

The one disadvantage to utilizing Cascade Layers right here is that it appears to outcome within the container queries polyfill not working. It’s not a giant deal for me on this occasion as I’ll be utilizing Chrome, however working the demo in Firefox means you received’t see the container queries in motion. I’ve filed a problem.

Assets

Discover out extra about Cascade Layers however studying this complete information by Miriam Suzanne, or watch Bramus’s video from CSS Day.