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"
为什么 BEM 命名在 Sass 中必须配合 & 符号写死结构
因为 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 的状态。
