layers

TIL about CSS Layers.
https://developer.mozilla.org/en-US/docs/Web/CSS/@layer

@layer utilities {
  /* creates a named layer called utilities. */
  .foo {
    padding: 5em;
  }
}

not super sure how to declare a layer in the DOM

the mdn table is outdated, there's more support now

I definitely don't understand these, how does an element know which layer to use? is this just for the specificity?

Like I thought this was "this part of the app uses the 'dark' layer"

but it looks like it's only here to help you with specificity

So the less specific p is applied after (thus taking precedence) the .box p because .box p is inside a layer.

this feels... like it's only going to make this shit more confusing?

imports are already a thing though just without the layer bit

this is also already a thing, that's the normal cascade

oh i didn't think that was a partial import, thought it put the whole file in as that layer you declare

that' swhat I thought initially, but it doesn't look like you can declare a layer as a specific DOM element, so you're back to normal CSS nesting for these.

Except it seems like if you also declare a layer, the order of precedence doesn't follow specificity anymore.

i.e. the layer order supersedes specificity

I'm still not sure I'm getting it. You might be closer than I am. But this really doesn't look like it's going to be intutive to work with

That would necessitate that you could say "alright this <main> element uses Layer dark", but that doesn't look possible

It's not isolating stylesheets to different elements, which would be stupid useful in a lot of cases. It's like customizing the specificity cascade, which is ... not immediately useful to me (as someone who understands the cascade and uses a preprocessor for nesting).