Do layers replace BEM?

No. They organize cascade order; BEM still helps naming and structure.

Unlayered vs layered?

Unlayered author styles sit above declared layers unless !important.

Same as equivalent selectors. The benefit is specificity, not speed.

Later layers win over earlier regardless of order in file.

Box

Layered color

utilities layer beats components here.

@layer theme, components, utilities;
@layer components { .btn { background: blue; } }
@layer utilities { .btn { background: green; } }

Override without fighting ID selectors.

List

.lay-active wins with a simple class.

:where(ul li) { color: #64748b; }
ul li.lay-active { color: #4f46e5; font-weight: 700; }

Layers reduce need for !important in large codebases.

Note

Prefer layers + low-specificity tokens over !important chains.

Document layer order in design systems.

@layer overrides {
  .danger { color: crimson; }
}

Do layers replace BEM?: No. They organize cascade order; BEM still helps naming and structure.
Unlayered vs layered?: Unlayered author styles sit above declared layers unless !important.
:where() performance?: Same as equivalent selectors. The benefit is specificity, not speed.