CSS @layer 级联层深入实战：终结样式优先级战争

1
/* 特异性: 0-1-0 */
2
.btn { color: blue; }
3

4
/* 特异性: 0-2-0，更高，所以生效 */
5
.primary.btn { color: red; }
6

7
/* 特异性: 1-0-0，最高 */
8
#submit { color: green; }

1
/* 方式一：预声明层顺序（推荐，在文件开头声明） */
2
@layer reset, base, components, utilities;
3

4
/* 方式二：声明并定义规则 */
5
@layer components {
6
  .btn { padding: 8px 16px; }
7
}
8

9
/* 方式三：匿名层（不能追加规则，用于一次性隔离） */
10
@layer {
11
  .legacy-hack { display: block; }
12
}

1
@layer A, B; /* A 先声明，优先级低于 B */
2

3
@layer B { .x { color: red; } }   /* 追加规则到 B */
4
@layer A { .x { color: blue; } }  /* 追加规则到 A */
5

6
/* 最终 .x 的颜色是 red，因为 B 的优先级高于 A */

1
@layer framework {
2
  @layer base {
3
    body { margin: 0; }
4
  }
5
  @layer components {
6
    .btn { border-radius: 4px; }
7
  }
8
}
9

10
/* 也可以用点号语法直接追加 */
11
@layer framework.components {
12
  .btn { font-size: 14px; }
13
}

1
/* 把第三方库的样式放到低优先级层 */
2
@import url('normalize.css') layer(reset);
3
@import url('element-plus/theme.css') layer(vendor);
4
@import url('./base.css') layer(base);
5

6
/* 你的样式在更高优先级层 */
7
@layer reset, vendor, base, components, utilities;

1
@layer components {
2
  .btn { color: blue; }
3
}
4

5
/* 未分层，优先级高于所有层 */
6
.btn { color: red; } /* 生效！ */

1
低优先级 ←————————————————————————→ 高优先级
2

3
[层1] → [层2] → [层3] → [未分层] → [!important 层3] → [!important 层2] → [!important 层1] → [!important 未分层]
4

5
正常顺序: 1 < 2 < 3 < 未分层
6
!important: 反转！3 < 2 < 1 < 未分层

1
/* styles/layers.css - 在入口文件最顶部引入 */
2
@layer reset, vendor, base, components, utilities;

1
<!-- 业务组件 -->
2
<style scoped>
3
@layer components {
4
  /* 简单的类选择器就能覆盖 Element Plus */
5
  .el-button {
6
    border-radius: 8px;
7
    font-weight: 500;
8
  }
9

10
  .el-input__wrapper {
11
    box-shadow: 0 0 0 1px #d1d5db;
12
  }
13
}
14
</style>

1
@layer components {
2
  .title { font-size: 24px; }
3
}
4

5
/* 这段未分层的 CSS 会覆盖上面的层内样式！ */
6
.title { font-size: 16px; }

1
@layer A { .x { color: red; } }
2
@layer B { .x { color: blue; } }
3
@layer A { .x { font-size: 20px; } } /* 这里不会让 A 的优先级变高 */
4

5
/* A 先声明，优先级始终低于 B */
6
/* .x 的颜色是 blue */

1
@layer base, components;
2

3
@layer base {
4
  .text { color: gray !important; }
5
}
6

7
@layer components {
8
  .text { color: blue !important; }
9
}
10

11
/* 结果：color 是 gray！因为 !important 下层顺序反转 */

1
/* ❌ 不预声明，层顺序取决于加载顺序 */
2
/* 如果 B 组件先加载，B 层先声明，A 后加载就会覆盖 B */
3

4
/* ✅ 在入口文件预声明所有层 */
5
@layer reset, vendor, base, components, utilities;
6
/* 无论组件以什么顺序加载，层的优先级都是确定的 */

1
/* 不支持 @layer 的浏览器会忽略整个 @layer 块 */
2
/* 可以在 @layer 外提供回退样式 */
3
.btn { color: blue; } /* 回退 */
4

5
@layer components {
6
  .btn { color: var(--color-primary); } /* 现代浏览器 */
7
}

1
@supports at-rule(@layer) {
2
  /* 支持 @layer 的浏览器执行这里 */
3
}

1
@layer reset, vendor, base, app;
2
@import url('third-party.css') layer(vendor);
3

4
/* 现有代码暂时不动，作为未分层样式，优先级自然最高 */

1
@layer app {
2
  /* 新组件的样式都放在 app 层 */
3
  .new-component { ... }
4
}