模块化样式通过SCSS局部文件、@extend占位符和BEM命名实现高内聚低耦合：\_partial文件按功能拆分，%placeholder定义样式契约，BEM类名解耦DOM结构，确保改样式不碰HTML。
因为模块化把样式责任切得足够细，改一个地方不会牵扯其他模块，也不用猜“这个类名到底在哪儿被用了”。
SCSS局部文件（_partial）让样式按功能拆开管
局部文件以_header.scss、_button.scss这类命名，不单独编译成CSS，只供@use或@import调用。它不是为了“多几个文件”，而是让每个文件只负责一件事：颜色变量放_variables.scss，按钮逻辑放_button.scss，布局栅格放_grid.scss。
- 改配色？只动
_variables.scss，所有引用它的文件自动生效 - 重构按钮？只打开
_button.scss，不用grep全项目找.btn - 新人接手？看文件名就知道
_form.scss管表单，_typography.scss管文字，不靠猜
@extend + 占位符选择器（%xxx）避免样式重复粘连
直接复制粘贴样式最危险——改一处漏三处。%button-base这种占位符不输出CSS，只等被@extend调用，相当于定义“按钮该长什么样”的契约，而不是“这个按钮现在长这样”。
- 写
.primary-btn { @extend %button-base; background: blue; }，生成的CSS里.primary-btn直接继承全部基础样式 - 删掉
.primary-btn的声明？不影响其他用@extend %button-base的组件 - 误用
@extend导致选择器爆炸？用@at-root包裹可强制提级，避免嵌套过深
BEM命名 + SCSS嵌套 = 重构时不怕DOM结构变
.card__title这类BEM类名不依赖HTML层级，article .card h3改成section .card > div > h3也不会崩样式。配合SCSS嵌套，写法更自然：
立即学习“前端免费学习笔记（深入）”；
.card {
&__title { font-size: 1.25rem; }
&__body { line-height: 1.6; }
&--featured { border: 2px solid gold; }
}
- 类名自带作用域，搜索
.card__title就能定位全部相关样式，不用翻HTML看结构 - 嵌套写法映射DOM关系，但生成的CSS仍是扁平的
.card__title，没冗余层级 - 禁止用
.card .title这种组合选择器——它隐式绑定DOM结构，一动就失效
真正难的不是拆模块，而是坚持“一个文件只做一件事”和“改样式不碰HTML结构”。这两条守不住，再多的@use和%placeholder也救不了维护成本。
