Transform CSS into SCSS (using BEM)-html教程-PHP中文网

Transform CSS into SCSS (using BEM)

本文详解如何将传统 CSS 选择器（如 .carousel-button:hover .arrow）正确转换为符合 BEM 命名规范的 SCSS 写法，重点解决嵌套中误用 &arrow 导致选择器失效的问题，并提供可复用的 SCSS 结构范例。

本文详解如何将传统 css 选择器（如 `.carousel-button:hover .arrow`）正确转换为符合 bem 命名规范的 scss 写法，重点解决嵌套中误用 `&arrow` 导致选择器失效的问题，并提供可复用的 scss 结构范例。

在使用 SCSS 编写遵循 BEM（Block–Element–Modifier）规范的样式时，一个常见误区是混淆 父级作用域拼接（&）与 独立子选择器 的语义。例如，原意是实现「当按钮悬停时，其内部 .arrow 元素变色」，即 CSS 中的 .carousel-button:hover .arrow，但若错误地写作：

&:hover {
  &arrow {  // ❌ 错误！编译为 .carousel-button:hoverarrow（无空格，非法选择器）
    fill: white;
  }
}

SCSS 的 & 符号代表当前选择器的父级完整名称，因此 &arrow 会拼接为 .carousel-button:hoverarrow —— 这既不符合 BEM 元素命名规则（__arrow 才是合法元素），也无法匹配 DOM 中的

✅ 正确做法是：对非 BEM 元素类名（如独立的 .arrow）直接使用普通类名选择器，不加 &：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

.carousel-button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: transparent;
  border: 1px solid var(--color-brand-dark);
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;

  &:hover {
    background-color: var(--color-brand-light);
    border: 1px solid white;

    // ✅ 正确：.carousel-button:hover .arrow
    .arrow {
      fill: white;
    }
  }

  &__arrow {
    // ✅ BEM 元素：对应 <span class="carousel-button__arrow">
    fill: var(--color-brand-dark);
    transition: fill 0.2s;
  }
}</span>

⚠️ 注意事项：

若 .arrow 实际是 BEM 元素，应统一命名为 .carousel-button__arrow，此时必须用 &__arrow（双下划线），而非 .arrow；
若项目中 .arrow 是全局复用图标类（如来自 Icon System），保留 .arrow 写法是合理且推荐的——SCSS 支持混合使用 BEM 和语义化工具类；
避免嵌套过深：超过 3 层嵌套（如 &:hover .arrow svg path）会降低可维护性，建议提取为独立选择器或使用 @at-root 调整作用域。

? 总结：& 仅用于生成父子连缀类名（如 &__element、&--modifier），而独立子组件（如第三方图标类、布局工具类）应脱离 &，以标准类名方式声明。掌握这一区分，是写出清晰、可扩展、BEM 合规 SCSS 的关键基础。