处理 CSS 中的小变化？

Question

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

例如，如果我有两个按钮：

.btn-red .btn-蓝色

我希望每个按钮彼此相邻，但我希望 .btn-blue 的左侧边距为 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;
}