layers.css

/* 1. Define the order of all layers */
@layer reset, base, library, components, utilities, overrides;

/* 2. Place different styles into corresponding layers */

/* reset.css or normalize.css */
@layer reset {
/* ...reset the browser's default styles... */
* { box-sizing: border-box; }
}

/* Basic element styles */
@layer base {
body { font-family: sans-serif; }
a { color: #333; }
}

/* Import third-party UI libraries, such as Ant Design Vue */
@import url('ant-design-vue/dist/reset.css') layer(library);
@layer library {
/* You can write global styles that override the UI library */
}

/* Our own business components */
@layer components {
.card { border: 1px solid #eee; }
.button { padding: 8px 16px; }
}

/* Utility class, like in Tailwind */
@layer utilities {
.text-center { text-align: center; }
.p-4 { padding: 1rem; }
}

/* Last resort "lifeline" layer, used to override everything */
@layer overrides {
.some-very-specific-case {
/* ... */
}
}