使用 CSS @layer 优雅覆盖

前言

在开发 Vue 项目时，你是否遇到过这种尴尬：想改一个 Element Plus 按钮的颜色，

结果发现写了三四个类名嵌套都不生效，最后只能祭出 !important 大招？

今天分享一个现代 CSS 利器：级联层(@layer)。它能让你从“选择器权重战争”中彻底解脱出来。

什么是 @layer？

简单来说，@layer 允许我们手动定义样式的优先级顺序。

在传统的 CSS 中，优先级由“权重（Specificity）”决定（比如 ID > Class > Tag）。

但在 @layer 面前，层的顺序决定一切。只要你在高优先级层里，

哪怕你的选择器只是一个简单的 .el-button，也能轻松覆盖掉低优先级层里复杂的嵌套选择器。

原生项目

style.css

@layer reset,demo;

@layer demo {
  .trapezoid {
    --s: 20%;
    clip-path: polygon(var(--s) 0, calc(100% - var(--s)) 0, 100% 100%, 0 100%);
  }
  .trapezoid {
    width: 50vmin;
    aspect-ratio: 2;
  }
}

@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

1. @layer reset, demo; (声明层顺序) 这行代码是在定义层的优先级顺序。

   • 规则：在这个列表中，越靠后的层，优先级越高。

   • 这里的逻辑： demo 层的样式会覆盖 reset 层。

   • 好处： 无论你后续在代码文件的哪个位置编写这些层的具体内容，浏览器都会严格按照这行声明的顺序来决定谁覆盖谁。

2. @layer demo { ... } 和 @layer reset { ... } (定义层内容) 这些代码块是将具体的 CSS 规则分配到指定的“层”中。

   • `@layer reset { ... }``：通常放一些基础的样式重置（如去掉边距、设置 border-box）。因为在声明顺序中它在最前面，所以它的优先级最低。

   • @layer demo { ... }：这里放的是当前案例的核心样式（梯形效果）。因为它在声明顺序中排在最后，所以即使这里的选择器权重较低，它也能确保覆盖前面层里的冲突样式。

为什么需要这个功能？

在传统的 CSS 中，如果你想覆盖一个第三方库的样式，

通常需要写极其复杂的选择器（比如 .parent .child.active）或者被迫使用 !important。

有了 @layer 后：

• 解决权重战争： 你可以把“基础库”放在低优先级层，把“自定义样式”放在高优先级层。

• 结构清晰： 像截图中展示的一样，开发者将“重置(reset)”、“基础(base)”和“演示(demo)”分开，逻辑非常明确。

Vue3 项目实战：三步走方案

如果你使用的是 Vue3 + Vite，且不想折腾 SCSS，只用原生 CSS 就能搞定。

第一步：定义全局样式中枢

在 src/assets/main.css 中，我们先“排座次”。这一步至关重要，越靠后的层，话语权越大。

src/assets/main.css

/* 1. 声明层的优先级顺序 */
/* reset (最低) < vendor (UI库) < theme (全局变量) < override (最高) */
@layer reset, vendor, theme, override;

/* 2. 把 Element Plus 塞进 vendor 层 */
/* 这样它的所有样式天生就比我们后续写的层级低 */
@import 'element-plus/dist/index.css' layer(vendor);

/* 3. 基础重置样式 */
@layer reset {
  * {
    box-sizing: border-box;
    margin: 0;
  }
}

第二步：在 main.ts 中引入

确保它是第一个被引入的样式文件：

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css' // 确保在这里引入

const app = createApp(App)
// ... 其他配置
app.mount('#app')

第三步：在组件中“降维打击”

现在，当你想修改组件样式时，只需要把代码包裹在 override 层里。

login.vue

<template>
  <el-button type="primary" class="custom-btn">我是自定义按钮</el-button>
</template>

<style scoped>
/* 关键点：包裹在最高优先级的层里 */
@layer override {
  :deep(.el-button--primary) {
    background-color: #6366f1; /* 即使不加 !important，也能稳赢 Element 默认样式 */
    border-radius: 99px;
    padding: 12px 24px;
  }
}
</style>

使用scss的环境

INFO

main.css 确实已经设置了层级顺序，但在某些特定场景下，如果不配合预处理器注入，可能会出现“层顺序失效”的风险。

为什么还要提“预处理器自动注入”？

主要为了规避以下两个“极端场景”：

场景 A：开发环境的“首屏样式闪烁” (FOUC), 在 Vite 开发模式下，样式是动态注入的。

如果某个路由下的组件样式比 main.css 更早被 Vite 注入到页面顶部（或者由于热更新导致顺序错乱），

而这个组件里写了：

@layer override { ... }

场景 B：CSS 模块化与独立编译

如果你在项目中使用了大量的 CSS Modules 或者复杂的预处理器逻辑，

有时候为了确保每一个独立的 CSS 单元都能正确识别层级关系（不依赖全局加载顺序），

在每个文件头部“复读”一遍顺序声明是最稳妥的“防御性编程”。

需要添加的配置

vite.config.ts

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 自动在每个 scss 文件顶部注入层顺序声明
        // 这样你在任何组件写 @layer override { ... } 都能确保顺序正确
        additionalData: `@layer reset, vendor, theme, components, override;`, 
      },
    },
  },
})

为什么这种方式更优雅？

逻辑清晰：第三方库归第三方库，业务覆盖归业务覆盖，井水不犯河水。

代码简洁：不再需要为了覆盖样式而写出类似.el-table .el-table__body-wrapper .cell 这种长得离谱的选择器。

可维护性极强：如果以后更换 UI 库，只需更换 vendor 层的引入，override 层的逻辑依然清晰可见。

兼容性说明

目前 @layer 的兼容性已经非常成熟：

Chrome 99+、Firefox 97+、Safari 15.4+ 均已支持。

全球支持率已达到 95% 以上。

如果你的项目需要兼容极老版本的浏览器，可以使用 PostCSS 插件 postcss-cascade-layers 进行向下兼容处理。

总结

CSS @layer 是样式管理的一次重大变革。它把“开发者”从“选择器算术题”中解放了出来。

如果你正在管理一个复杂的 Vue 项目，不妨尝试这种新思路！

你在覆盖 UI 库样式时用过最疯狂的选择器是什么？欢迎在评论区分享！