HTML & CSS Interview Question #123

What are CSS cascade layers?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

Cascade layers, declared with @layer, allow authors to explicitly control the priority order of groups of styles before selector specificity is considered within the author origin. They can help organize resets, third-party libraries, components, and overrides.

Detailed Explanation

Layers reduce the need to increase selector specificity merely to override an earlier architectural layer. Important declarations have special layer-order behavior, so teams should understand the cascade rather than treating layers as simple file ordering.

Code Example

@layer reset, framework, components, utilities;

@layer components {
    .button {
        padding: .75rem 1rem;
    }
}

@layer utilities {
    .hidden {
        display: none;
    }
}