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编写过程更快更有效？

请注意：

A similar question已经存在，但两年前已经回答，因此需要提供最新答案
作为一个相对较新的SO用户，我不确定这是属于这里还是程序员。如果这是关于SO的偏离主题，我将很乐意迁移它。

Answer 1

您应该根据其目的和逻辑对样式进行分组，而不是通过常见的样式属性。如果.a和.b没有任何共同之处，可以将display: inline-block;放在每个上面。

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

Answer 2

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

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

按照HTML标记中显示的顺序编写CSS选择器。我们通常首先查看标记来开始编写样式（通过inspect元素，因此，当您按照标记的顺序编写选择器时，您可以大致了解在CSS文件中查找规则的位置。

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

在一行上写样式。除非有一个很好的理由你不能这样写（例如你使用CSS预处理器，你必须嵌套你的规则，你使用由其他10位开发人员维护的现有代码库等），在一行上编写样式可以帮助您更快地找到样式。例如，写作：

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;
}

在一行上编写规则允许您使用SCAN选择器。此外，您可以轻松地将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; }

查找和替换是您的面包和黄油。如果您使用上述两个建议组织选择器，通常查找主要部分的选择器可以使您足够接近以找到所需的特定规则。例如，如果您正在尝试查找特定内容，例如#someDiv header ui li a:hover，那么您可以搜索#someDiv，这会让您足够接近以找到其余内容。

希望有所帮助：）

Answer 3

首先，不要过多考虑CSS中的优化。正如其他人的评论中所述，有一些工具可供使用。

您必须设置元素的样式而不是“元素样式”。这个奇怪的句子意味着CSS不应该被定义为：

.class1, .class2, .class.., classn {
  display:inline-block;
}

.class1, .class2, .class3{
  backgroundColor: #333
}

.class1, .class.., classn {
  opacity: 0.1
}
...

因为你会变得疯狂地看着应用于你正在造型的特定元素的所有规则。善待你的大脑：）

此外，我认为现在通常的做法是使用chrome检查器和类似工具直接在浏览器中进行样式设置。你会看到更好的规则，其中定义了很多属性，20个规则适用于你的元素，还有很多其他元素与你的造型元素无关。

如果你想更快地编写css，就像其他人说的那样，你应该使用css预处理器：Less或sass。虽然萨斯是明显的赢家，但我已经习惯了，因为我学会了用较少的内容构建的twitter引导程序。这没关系，开始使用css预处理器的改进比在less或sass之间选择要大得多。

Answer 4

你的问题似乎是设计师的“笼统”混乱。设计一个CSS的最佳方法是你应该清楚哪个类适用于哪个类？如果你想对不同的元素应用不同的属性，（比如你想为div设置width = 40px，为span设置50px），那么你应该创建新的css类，但如果你有所有属性相同，只需继续使用现有的属性！

添加po [roperty的最佳方式是，如果必须向单个元素添加新属性，请使用内联css。保持样式表的格式对您有所帮助。示例：

<div class="divcss" style="height:35px">

Answer 5

当谈到编写更好，更易维护的CSS代码时，你只能在纯CSS中做这么多。而且，正如我相信您之前听过的，您可以用Sass或Less编写代码，这些代码是动态CSS语言。

这可能一切都很好，但是这与你的问题有什么关系？继续阅读！例如，在 Less 中，您可以使用嵌套CSS 。例如，请查看以下内容：

article.post {

    p{
        margin: 0 0 12px 0;
    }
    a {
        color: red;
    }
    a:hover {
        color: blue;
    }
    img {
        float:left;
    }

}

“你可以尽可能多地嵌套规则，这可以为你节省很多后来担心。你有没有想过改变填充但是因为你不知道究竟是什么而感到害怕它可能影响的元素？通过使用嵌套，您可以占用很多猜测你的CSS。“

现在，Less的美妙之处在于你已经知道如何写它。所有CSS代码都是有效的少代码。除此之外，你可以做更多。我们来看看 mixins ，例如：

.rounded_top {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}



.tab {
    background: #333;
    color:#fff;
    .rounded_top;  //Now you have a rounded top with simple, maintainable code
}



.submit {
    .tab;
    background: red;  //Notice that background: #333; is overridden here
}

有一个tremendously wonderful article on all the features of Less here，这只是你可以用Less做的一小部分，但我想说的是你不必害怕跳进动态CSS语言。

您已经知道如何使用它们。

Answer 6

你需要学习一些关于CSS预处理器的知识。您有一些选项，例如SASS和LESS。网络上有许多资源，您可以从中了解这些预处理器以及如何使用它们。

您所询问的更多是关于您定义的新CSS类的用法。它就像一张桌子，一把椅子和一棵树都用木头制成，但椅子的颜色也可能与它们的常见属性不同。这就是OOCSS的用武之地。

上面的例子可能不太好，但我希望你能得到我想说的话。如果您希望为现有样式添加新属性，则由您决定如何进行。但如果你想为你的风格赋予意义，那么你需要整理好。

加成

你绝对应该通过Object Oriented CSS浏览Stubbornella的整个wiki。您可能会发现该存储库上的提交已经很久了，但它们已成为许多基于OOCSS的框架的基础。

就个人而言，我是inuit.css的粉丝。这是我遇到的最强大的CSS框架，它绝对令人兴奋。它让您可以完全控制您的设计并保持干爽。

Answer 7

您可以使用特定类名作为默认或常用样式制定一组规则，以便您可以定位特定的ID，类或标记。

.pos-inline{
  display:inline-block;
}
.col-white {
  color: #fff;
}

只需添加以逗号（.a，。b，＃c）分隔的类或div，无论您要应用哪个属性。

Answer 8

如果优化CSS文件，可以这样写：

.dis-inblck{display:inline-block;}
.color-w{color:#fff;}

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

8 个答案:

加成