css - 处理 CSS 中的微小变化？

Question

处理 CSS 中微小变化的最佳方法是什么？

例如假设我有两个按钮:

.btn-红 .btn-蓝

我希望每个按钮彼此相邻，但我希望 .btn-blue 的 margin-left 为 10 像素。

我有很多可以实现的选项:

• 我可以向 .btn-blue 元素添加内联样式(但是如果您遵循像 BEM 这样的命名约定，那么您会遇到可维护性和可读性的问题)。
• 我可以创建一个实用程序类来增加 10 像素的边距(但是我陷入了可能有很多实用程序类的陷阱，如果我想在另一个元素上额外增加 20 像素的边距怎么样？)
• 我可以扩展 .btn-blue 并应用一个不同的类(但这会产生与使用一次性实用程序类几乎相同的问题)

• 我可以直接向 .btn-green 类添加 10 个像素，但这与单一职责原则冲突。

• 我可以将包装类作为目标并使用后代选择器目标 .btn-blue，但随后我否定了使用 BEM 之类的东西的用处并陷入了特异性的世界。

我意识到这些问题相当迂腐，但这是关键问题之一，因为我的 CSS 文件增长通常会失控。

假设我有以下......

SASS:

.btn {
  padding: 10px  30px;
  font-size: 16px;
  border-radius: 3px;
  border: none;
}

.btn-red,
.btn-blue {
  @extend .btn;
  color: white;
}

.btn-red {
  background: red;
}

.btn-blue {
  background: blue;
}

HTML:

<div class="btn-wrap">
  <button class="btn-red">
    Mr Red
  </button>
  <button class="btn-blue">
    Mr Blue
  </button>
</div>

Answer 1

老实说，我不太确定您要实现的目标，但是这样的事情会有帮助吗？

.btn-red + .btn-blue { /* Or [class*="btn-"] + [class*="btn-"], maybe */
   margin-left: 10px;
}