OWD project: @layers and cascade

[estelle]

Cascade layers are part of Interop 2022

Cascade layers give web developers more control over the cascade. They provide a way to group selectors into layers, each with its own specificity. Cascade layers are now supported in most, but not all, browsers.

Cascade layers mean developers don't need to order selectors carefully or create highly specific selectors to overwrite base CSS rules. It also means there has been a change to the cascade.

We have to:

• [x] Create a Cascade layers tutorial (new)
• [x] Rewrite Introducing the CSS Cascade to include Cascade layers
• [x] Rewrite Cascade and inheritance
  • [x] Live example on layers for tutorial
• [x] Rewrite CSS Cascade Skills test
• [-] Add @layers to CSS Custom Properties for Cascading Variables
• [x] Rewrite specificity
  • [x] include @layers impact on cascade
  • [x] including proximity of elements
  • [x] explain specificity algorithm
• [x] Document !important

[dipikabh]

Hi @estelle, just a heads up to let you know that I will be working on the @import page for issue#9369. I might also touch the @layer page a bit. I can let you know when I am done in a day or two. Hope that's okay with you and hopefully it will not conflict with your work on cascade layers.

[Elchi3]

This looks mostly done. Except for the leaning part. It has an open PR: https://github.com/mdn/content/pull/17723 Is anyone reviewing that?

[estelle]

It's still in draft mode.

[estelle]

Finished!