调试技巧

经验和技巧

用 class name 在源码中定位样式

排查样式问题时，一个高频操作是：在浏览器控制台的 Elements 面板审查 DOM，复制目标元素的 class name，再到编辑器里全局搜索，快速定位对应的样式代码。

这个技巧成立的前提是：class name 在源码中必须是完整、可搜索的字面量。

反例是 SCSS 嵌套中的省略写法。& 拼接部分类名（如 &-title、&--modifier）虽然书写简洁，但编译产物中的完整类名（如 card-title）在源码里并不存在，搜索时一无所获，只能退回人工翻找，拖慢定位问题的速度：

.card {
  // ❌ 源码中搜不到 "card-title"
  &-title {
    font-size: 16px;
  }
  &--disabled {
    opacity: 0.5;
  }
}

正例是子元素和修饰符写完整类名。& 本身并不是问题——组合伪类、状态类，或用于父子、兄弟选择器（如 & > .a、& + .b）都不影响搜索，这些写法中类名仍是完整字面量；只有 &- 形式的部分类名拼接才需要避免：

.card {
  // ✅ 完整类名，可搜索
  .card-title {
    font-size: 16px;
  }
  .card--disabled {
    opacity: 0.5;
  }

  // ✅ & 组合状态类与伪类，状态类字面量完整
  &.is-disabled {
    cursor: not-allowed;
  }
  &:hover:not(:disabled) {
    border-color: var(--color-primary);
  }

  // ✅ & 用于组合器，类名仍是完整字面量
  & > .card-header {
    padding: 8px;
  }
  & + .card-footer {
    margin-top: 8px;
  }
}

一句话总结：& 的职责是组合，不是拼接。写样式时多敲几个完整字符，就能在排查问题时省下大量翻找时间。