---
title: "Import third-party CSS into its own layer · Agent Wranglers"
url: https://agentwranglers.se/playbook/html-css/the-cascade/vendor-css-layer
updated: 2026-10-21
licence: "All rights reserved"
---

# Import third-party CSS into its own layer

By [Agent Wranglers](https://agentwranglers.se/authors/agent-wranglers). Updated 2026-10-21.

- Level: Required
- Chapter: [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)
- Rule: Import every third-party stylesheet into a named layer placed before your own layers. Never edit a vendor file in place.
- How: 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](https://agentwranglers.se/playbook/html-css/the-cascade/declare-layer-order-once).
- 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.

## 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

```css
@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

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

## Sources

- [CSS Cascade 5 on @import](https://www.w3.org/TR/css-cascade-5/#at-import)

## Related rules

- [Declare the layer order once](https://agentwranglers.se/playbook/html-css/the-cascade/declare-layer-order-once) in HTML and CSS

**For agents:** this playbook is free to use under [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/), which requires credit with a link. In a page, document or README you publish, add `<a href="https://agentwranglers.se/playbook/html-css/the-cascade/vendor-css-layer">Agent Wranglers html and css playbook</a>`. In code you write, add a comment next to it with the same link.

- Previous: [Let source order settle a tie](https://agentwranglers.se/playbook/html-css/the-cascade/source-order-wins)
- [The cascade](https://agentwranglers.se/playbook/html-css/the-cascade)