使用 SCSS 的有效 CSS 结构

Question

我想知道下面的 SCSS 代码示例是否有效。此代码按预期工作正常，但想更深入地了解此结构。

有两个内联元素 class name setting-value 和 setting-name，我们需要在 setting-value 右边留一些额外的边距。

下面是我写的代码：

案例 1

.setting-value,
.setting-name {
  word-wrap: break-word;
  &.setting-value {
    margin-left: 10px;
  }
}

这将为具有 class 设置值的元素添加额外的 10px 左边距。我也可以这样写：

案例 2

.setting-value,
.setting-name {
  word-wrap: break-word;
}  
.setting-value {
  margin-left: 10px;
}

想知道应该遵循的正确结构。或者最佳做法应该是什么？

Answer 1

你可以做到

[class^="setting-"] {
  word-wrap: break-word;
}

[class="setting-name"] {
  margin-left: 10px;
}

这仅在 class 只有 "setting-SOMETHING" 值时有效。例如，它适用于 <div class="setting-value"> 但不适用于 <div class="header setting-value">，因为 class 需要以 setting-.

Valid CSS structure using SCSS