CSS项目维护如何控制风险_借助Sass严格规范样式命名与结构

class名带连字符时JS需用驼峰访问dataset，因HTML5自动转换；Sass不干预此映射，故.btn-primary-large对应el.dataset.btnPrimaryLarge。

为什么 class 名称包含连字符却不能由 JS 直接访问 dataset

原因在于 HTML5 dataset 会将连字符转换成驼峰形式，而 Sass 编译时不会介入这一映射过程——即使你写 .btn-primary-large，到了 JS 中也必须使用 el.dataset.btnPrimaryLarge，而不能用 el.dataset.btn-primary-large。不少人会在这里受阻，并误认为 Sass 或 HTML 的写法有问题。

• 连字符命名是保障 CSS 可读性的必要方式，不要只为方便 JS 而改用下划线或驼峰
• 当 JS 需要频繁读取 data 属性时，建议统一采用短前缀 + 驼峰形式（如 data-ui-state → uiState），以免较长名称引起转换歧义
• Sass 中可通过 @function 封装命名生成器，比如 btn($size: large) 返回 btn-primary-#{$size}，保证拼写一致性

怎样借助 Sass @mixin 限制组件类名的层级深度

深层嵌套（如 .card .header .title span）最容易在大型项目维护中失去控制。虽然 Sass 不会限制嵌套层数，但可以用 @mixin 把语义结构强制限定为“最多两层”。

• 定义 @mixin component($name)，内部只允许 & 和 &__ / &-- 子选择器，禁用三级 & & 嵌套
• 实际写法：用 .#{$name} 作为根，所有子元素必须显式以 __ 或 -- 开头，例如 .card__body 合法，.card .body 被视为违规
• 再结合 stylelint 的 selector-max-compound-selectors: 2 规则，即可在 CI 上线阶段阻止深层选择器

@use 与 @import 混合使用是否会产生命名冲突

会，而且冲突方式很隐蔽：当一个文件用 @use "vars"，另一个用 @import "vars"，Sass 会分别加载两份变量副本，$color-primary 可能指向不同值。尤其在团队协作中，有人升级了 @use，有人没动老文件，样式就突然错乱。

• 全项目必须统一模块引入方式，推荐 @use，它默认启用命名空间（vars.$color-primary），天然防污染
• 执行迁移时，不要直接替换 @import，应先添加 @use "xxx" as * 作为过渡，再逐步取消全局暴露
• 需要注意 @use 无法支持循环依赖，而 @import 会在不提示的情况下忽略——只要发生循环，@use 便会直接报错 "Circular dependency detected"

为什么 Sass 中的 BEM 命名必须结合 & 符号固定结构

这是因为 BEM 语义取决于类名拼接方式，而非 DOM 层级。若写成 .card__header { .title { ... } } 表面上更省事，实际上却违背了 BEM 的“独立可复用”原则——这一 .title 样式会跟随父容器变化，因而不能单独抽离进行测试或复用。

立即学习“前端免费学习笔记（深入）”；

• 正确方式是为每个 BEM 元素声明完整类名：.card__title，并在 Sass 中使用 &__title 确保编译结果不包含空格
• 禁止使用 & .title 或者 & > .title，因为这类写法会让样式与 DOM 结构形成强耦合，之后修改模板时非常容易遗漏样式
• 确实需要通过父子关系进行控制时（例如悬停时改变子元素），可使用 &__title:hover 或者 &--hovered &__title，让类名层面的行为保持可预测

困难之处并非写出符合规范的 Sass，而是让每个人始终遵循规范——既要把命名规则加入编辑器提示，也要让编译错误明确标出哪一行违反了 BEM 或 @use 约束，否则仅过三天，又会回到 div:nth-child(3) > span:first-of-type 的状态。