Structure CSS layers for reset, vendor, and components

WHAT THIS TESTS This is the applied version of the layers question: can you actually architect a stylesheet so resets, vendor CSS, and your own components coexist predictably without specificity battles.

A GOOD ANSWER COVERS First restate the mechanics: layer order is a cascade step above specificity, and source order only resolves ties within one layer. Then give a concrete order declared once at the top, for example @layer reset, vendor, components, utilities. Reset goes earliest so every later rule can override its low-opinion defaults. Third-party library CSS imports into the vendor layer, often via @import url(lib.css) layer(vendor), which neutralizes the library's specificity against your code. Your component styles live in components and naturally win. A utilities layer last lets single-purpose helpers override components when intentionally applied.

COMMON WRONG ANSWERS Leaving your component styles unlayered while everything else is layered; unlayered rules outrank all layers, which can accidentally work but is fragile and confusing. Assuming a vendor selector like .modal .btn beats your .btn because it is more specific; once both are layered, layer order decides. Trying to fix conflicts with !important, which inverts layer priority and creates new surprises.

LIKELY FOLLOW-UPS Where do design-system tokens or base typography go? Usually a base layer between reset and components. How do you import a stylesheet into a layer? Use the layer() function on @import or wrap rules in @layer name. What about media queries inside layers? They work normally; the layer assignment is independent of conditional rules.

ONE CONCRETE EXAMPLE You pull in a date-picker library whose .dp-input has specificity 0,2,0 and clashes with your .field input at 0,1,1. Declare @layer reset, vendor, components; import the library with layer(vendor); place .field input in components. Your rule wins purely because components is declared after vendor, so you never touch the library source or add !important.