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

Question

我发现在写css时我的大部分时间都浪费在找到合适的地方放置新规则.例如,如果我有这个样式表:

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

.d {
  color: #fff;
}

我想补充一点.d {display:inline-block;),我经常会想一想我是否应该将它添加到第1或第2部分.含义:

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

VS

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

显然,随着CSS变得越来越复杂,浪费了更多的时间.另一个时间消费者是在样式表中多次出现选择器时定位现有规则以编辑它们的过程.

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

---

请注意:

1. 一个类似的问题已经存在,但它是两年前回答,因此需要一个上最新的答案

2. 作为一个相对较新的SO用户,我不确定这是属于这里还是程序员.如果这是关于SO的偏离主题我将很乐意迁移它.

Answer 1

您应该根据其目的和逻辑对样式进行分组,而不是通过常见的样式属性.如果.a并.b没有任何共同点,可以戴上display: inline-block;它们.

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

Answer 2

几年前我遇到了这个问题，和你一样，我注意到每当我处理大型 CSS 文件（比如......1000 多行）时，大部分时间都花在查找特定选择器上，而不是编辑或编写具体规则。

正因为如此，我遵循了一些约定，这可能使我使用 CSS 文件变得更加容易 10 倍。关键是要认识到工作流程中的瓶颈是查找选择器，因此关键是让这个过程变得更容易。

1. 按照 HTML 标记中出现的顺序编写 CSS 选择器。通常，我们首先通过查看标记（通过检查元素等）来开始编写样式，因此当您按照标记的顺序编写选择器时，您会大致了解在哪里查找规则你的 CSS 文件。

   因此，对于您的示例代码，答案取决于您是否为了代码重用而牺牲组织。当然，如果您将内容保留在同一个选择器中（即 ），您可能能够重用代码，.a, .b, .c, .d但是当您 6 个月后重新访问 CSS 时，您是否会导致选择器无法找到？运用你的判断力。

2. 将样式写在一行上。除非有一些充分的理由不能以这种方式编写（例如，您正在使用必须嵌套规则的 CSS 预处理器、您使用由 10 个其他开发人员维护的现有代码库等），否则在单个代码上编写样式line 可以帮助您更快地找到款式。例如，这样写：

   selector { property1: value, property2: value; property3: value; }
   selector2 { property1: value, property2: value; property3: value; }
   selector3 { property1: value, property2: value; property3: value; }
   

   代替：

   selector { 
     property1: value, 
     property2: value; 
     property3: value; 
   }
   
   selector2 { 
     property1: value,
     property2: value;
     property3: value;
   }
   
   selector3 { 
     property1: value,
     property2: value;
     property3: value;
   }
   

   在单行上编写规则允许您扫描选择器。另外，您可以轻松地将包含 1000 多行的 CSS 文件减少到该数量的 10 倍，这使其更易于管理。再次记住，我们工作流程中的瓶颈是查找选择器。因此，虽然编写“传统”方式使读取属性变得更容易，但它实际上减慢了查找选择器的过程。更重要的是，如果您在一行中编写选择器，则可以使用如下缩进：

   header { property1: value, property2: value; property3: value; }
     header h1 { property1: value, property2: value; property3: value; }
     header h3 { property1: value, property2: value; property3: value; }
     header h3 span { property1: value, property2: value; property3: value; }
   body { property1: value, property2: value; property3: value; }
   

3. 查找和替换是您的面包和黄油。如果您使用上面的两个建议来组织选择器，通常找到主要部分的选择器可以让您足够接近找到您需要的特定规则。例如，如果您想查找一些非常具体的内容，例如“and #someDiv header ui li a:hover”，您只需进行搜索即可#someDiv，这样您就可以足够接近地找到其余内容。

希望有帮助:)