CSS自定义属性、:where()、@layer和BEM命名可有效隔离模块样式作用域：用--module-gap等变量统一控制设计约束；:where()限定作用范围且不增优先级；@layer声明层级避免覆盖；BEM前缀确保类名唯一。
用 CSS 自定义属性隔离模块样式作用域
多个布局模块共用同一份 CSS 时，margin、padding、width 等基础属性容易互相干扰。直接靠选择器优先级硬压不是长久之计，更可靠的方式是把每个模块的“设计约束”显式抽成自定义属性，在模块根元素上统一设置。
-
--module-gap: 16px控制内部间距，子组件只读取该变量，不写死数值 -
--module-max-width: 768px替代全局max-width，避免影响其他区域 - 模块容器加
style="--module-gap: 24px; --module-max-width: 1024px;"即可局部覆盖 - 所有子元素用
gap: var(--module-gap)、max-width: var(--module-max-width)，天然隔离
给每个布局模块配独立的 :where() 作用域前缀
传统写法如 .header .nav a 容易被外部样式穿透或意外命中。CSS :where() 不增加优先级，但能精准限定作用范围，适合模块封装。
- 为模块根加唯一类名，比如
class="layout-hero" - 所有内部样式都以
:where(.layout-hero) > *或:where(.layout-hero) .button开头 - 即使页面其他地方也有
.button，也不会被这个模块的规则影响 - 比
:is()更安全——它完全不参与优先级计算，彻底规避样式污染
用 @layer 显式声明模块样式层级
CSS 层叠逻辑混乱的根本原因是缺乏层级声明。现代浏览器支持的 @layer 让你可以把不同模块的样式分组归类，控制加载和覆盖顺序。
- 在 CSS 开头声明：
@layer layout, layout-hero, layout-features, layout-footer;
- 每个模块样式块开头加
@layer layout-hero { ... } - 后续引入的第三方组件样式默认落在
@layer utilities，天然低于layout层，不会越权覆盖布局结构 - 注意：
@layer声明顺序决定层优先级，先声明的层优先级更低
避免用通用类名污染全局，改用 BEM 模块内联命名
像 .title、.content 这类泛化类名，一旦多个模块同时使用，就等于主动放弃样式隔离。BEM 不是教条，关键是“模块前缀 + 语义后缀”的组合逻辑。
立即学习“前端免费学习笔记（深入）”；
- 不写
.title，改写.hero__title、.features__title - 子元素命名体现归属，如
.hero__cta-button，而非.button--primary - 修饰符仅限本模块内有效，
.hero__title--large不会干扰.features__title--large - 配合构建工具（如 PostCSS）可自动补全命名空间，减少手误
body 上的 font-size 被改了，三个模块的行高全乱；某个全局 box-sizing: border-box 漏写了，一个模块的宽度计算就崩。拆分不是为了多建几个文件，而是让每个模块能回答清楚：“我的尺寸、间距、字体、盒模型，由谁定义？能否被外部静默修改？” 
