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，有人没动老文件，样式就突然错乱。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 全项目必须统一模块引入方式，推荐 @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 的状态。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！