css - 如何更快地插入/编辑/分组 css 规则？

Question

我发现在编写 css 时，我的很多时间都浪费在了寻找放置新规则的正确位置上。例如，如果我有这个样式表:

.a, .b, #c {
  display:inline-block;
}

.d {
  color: #fff;
}

我想添加 .d {display:inline-block;)，我经常会考虑一下是否应该将其添加到第一部分或第二部分。含义:

.a, .b, #c, .d {
  display:inline-block;
}

对比

.d {
  color: #fff;
  display:inline-block;
}

显然，随着 CSS 变得越来越复杂，在这上面浪费的时间也越来越多。 Another time consumer is the process of locating existing rules in order to edit them, when the selector appears several time in the stylesheet.

是否有特定的工作流程/工具可以使 CSS 编写过程更快更高效？

---

请注意:

1. A similar question已经存在，但是两年前就已经回答了，所以需要一个最新的答案

2. 作为一个相对较新的 SO 用户，我不确定这属于此处还是程序员。如果这与 SO 无关，我很乐意迁移它。

Answer 1

您应该根据样式的用途和逻辑对样式进行分组，而不是根据通用的样式属性。如果 .a 和 .b 没有任何共同点，则可以将 display: inline-block; 放在它们每个上。

专注于可维护的代码而不是超高效的 CSS 文件(有缩小和压缩库可以为您做到这一点)。