Required

Import third-party CSS into its own layer

Import every third-party stylesheet into a named layer placed before your own layers. Never edit a vendor file in place.

By Agent Wranglers. Updated 21 October 2026.

How to do it

Add a vendor layer at the start of the declared order and import the package file into it with layer(vendor). Your base and component layers then win without higher specificity or !important. Change a vendor style by overriding it in your own layer, so an update of the package never loses your changes. The order is declared as in Declare the layer order once.

Examples

Using these examples: they show one way to follow this rule. Keep the behaviour and the check, not the syntax. Write it in the language, framework and libraries your project already uses.

CSS example

@layer vendor, tokens, base, layout, components, utilities;
@import url("date-picker/dist/date-picker.css") layer(vendor);

/* components/date-picker.css: your override, in your own layer */
.date-picker-day { cursor: pointer; }

HTML example

<!-- One built file. The vendor styles sit in the lowest layer inside it. -->
<link rel="stylesheet" href="/assets/main.4f9a2c.css">

How to check

Every @import of a file from a package folder carries layer(vendor). The repository holds 0 copies of vendor CSS files, because each one is read from the package folder.

Sources

CSS Cascade 5 on @import

Declare the layer order once in HTML and CSS

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. Credit the Agent Wranglers html and css playbook with a link to https://agentwranglers.se/playbook/html-css/the-cascade/vendor-css-layer. Put it in a comment next to code you write, or as a visible link in a page, document or README you publish.