引言CSS层叠层(Cascade Layers)是CSS规范的重要新增特性它提供了一种明确的方式来组织和管理CSS规则的优先级。通过层叠层开发者可以更好地控制样式的应用顺序避免样式冲突。一、层叠层基础1.1 什么是层叠层层叠层允许开发者将CSS规则组织到不同的层中并控制这些层的优先级顺序。layer reset, base, components, utilities; layer base { body { font-family: sans-serif; } } layer components { .card { padding: 1rem; border: 1px solid #ccc; } }1.2 与传统层叠的对比特性传统层叠层叠层优先级控制选择器权重层顺序组织方式无序分层组织可预测性低高冲突解决复杂简单1.3 基本语法/* 声明层顺序 */ layer layer1, layer2, layer3; /* 创建层并添加样式 */ layer layer1 { /* 样式规则 */ } /* 未声明顺序的层 */ layer utilities { .text-center { text-align: center; } }二、层叠层的创建与使用2.1 声明层顺序layer reset, base, components, utilities; /* 后面声明的层优先级更高 */ layer theme;2.2 层内样式规则layer base { html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; font-family: system-ui, sans-serif; } } layer components { .btn { display: inline-block; padding: 0.5rem 1rem; border: none; border-radius: 4px; cursor: pointer; } .card { padding: 1rem; background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } }2.3 未命名层layer { /* 未命名层优先级最低 */ :root { --primary-color: #3366ff; } }三、层叠层优先级3.1 层顺序优先级layer a, b, c; layer c { .box { color: red; } /* 最高优先级 */ } layer b { .box { color: green; } /* 中间优先级 */ } layer a { .box { color: blue; } /* 最低优先级 */ }3.2 与!important的交互layer base { .btn { color: blue !important; /* 仍受层顺序影响 */ } } layer theme { .btn { color: red; /* 即使没有!important也会覆盖base层 */ } }3.3 选择器权重在层内的作用layer components { .btn { color: blue; } button.btn { color: green; /* 同一层内选择器权重仍然生效 */ } }四、层叠层的组合4.1 嵌套层layer components { layer buttons { .btn { padding: 0.5rem; } } layer cards { .card { padding: 1rem; } } }4.2 层的合并layer base; layer base { body { margin: 0; } } layer base { body { padding: 0; } /* 合并到base层 */ }4.3 导入层/* reset.css */ layer reset { * { margin: 0; padding: 0; } } /* main.css */ import reset.css layer(reset); layer base { body { font-family: sans-serif; } }五、实战案例5.1 大型项目样式组织/* 定义层顺序 */ layer reset, base, layout, components, utilities, theme; /* Reset层 */ layer reset { *, *::before, *::after { box-sizing: border-box; } } /* Base层 */ layer base { :root { --color-primary: #3366ff; --color-secondary: #ff6633; } body { font-family: Inter, system-ui, sans-serif; line-height: 1.6; } } /* Layout层 */ layer layout { .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .grid { display: grid; gap: 1rem; } } /* Components层 */ layer components { .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 4px; font-weight: 500; cursor: pointer; } .btn-primary { background: var(--color-primary); color: white; } } /* Utilities层 */ layer utilities { .text-center { text-align: center; } .flex { display: flex; } .gap-2 { gap: 0.5rem; } }5.2 主题切换layer base, theme-light, theme-dark; layer theme-light { :root { --bg-color: #ffffff; --text-color: #333333; } } layer theme-dark { :root { --bg-color: #1a1a1a; --text-color: #ffffff; } }5.3 第三方库隔离import bootstrap.css layer(bootstrap); layer base { /* 自定义基础样式 */ } layer components { /* 自定义组件不会被bootstrap覆盖 */ .btn { border-radius: 8px; /* 会覆盖bootstrap的btn样式 */ } }六、高级技巧6.1 动态层顺序layer defaults, overrides; layer defaults { .element { color: blue; } } media (prefers-color-scheme: dark) { layer overrides { .element { color: lightblue; } } }6.2 条件层layer base; supports (display: grid) { layer base { .grid { display: grid; } } }6.3 JavaScript交互layer default, user; layer default { .theme { --primary: #3366ff; } } layer user { .theme { --primary: #ff6633; /* 用户自定义 */ } }七、浏览器兼容性7.1 当前支持情况浏览器版本支持状态Chrome99支持Firefox97支持Safari15.4支持Edge99支持7.2 降级方案layer base, components; layer base { body { font-family: sans-serif; } } /* 降级方案 */ supports not (layer base) { body { font-family: sans-serif; } }八、最佳实践8.1 层命名规范/* 推荐的层命名 */ layer reset /* 重置样式 */ layer base /* 基础样式 */ layer layout /* 布局样式 */ layer components /* 组件样式 */ layer utilities /* 工具类 */ layer theme /* 主题样式 */8.2 避免过度分层/* 避免过多的层 */ layer a, b, c, d, e, f, g; /* 难以管理 */ /* 推荐合理的层数 */ layer reset, base, components, utilities;8.3 文档化层顺序/* * 层顺序说明从低到高 * 1. reset - 浏览器样式重置 * 2. base - 基础HTML元素样式 * 3. layout - 布局组件 * 4. components - UI组件 * 5. utilities - 工具类 * 6. theme - 主题覆盖 */ layer reset, base, layout, components, utilities, theme;九、总结CSS层叠层是管理CSS优先级的强大工具它提供了清晰的样式组织方式。关键要点使用layer声明层顺序后面声明的层优先级更高同一层内使用选择器权重可以嵌套和合并层适合大型项目样式管理掌握层叠层将使你的CSS更加可维护和可预测。