9

我发现我在编写 css 时的很多时间都浪费在找到合适的地方来放置新规则。例如，如果我有这个样式表：

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

.d {
  color: #fff;
}

而且我想添加.d {display:inline-block;)，我经常会考虑是否应该将其添加到第 1 节或第 2 节。意义：

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

对比

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

显然，随着 CSS 变得越来越复杂，在这方面浪费的时间也越来越多。另一个时间消费者是定位现有规则的过程，以便在样式表中的选择器出现多次时选择它们。

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

请注意：

  1. 类似的问题已经存在，但两年前已回答，因此需要最新的答案

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

4

8 回答 8

7

您应该根据样式的目的和逻辑对样式进行分组，而不是根据常见的样式属性。如果.a并且没有任何共同点，则可以将它们中的每一个都.b穿上。display: inline-block;

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

于 2013-01-29T13:36:28.590 回答
3

几年前我遇到了这个问题，和你一样，我注意到每当我处理大型 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. 查找和替换是您的生计。如果您使用上述两个建议来组织您的选择器，通常为主要部分找到选择器可以使您足够接近以找到您需要的特定规则。例如，如果你想找到一些超具体的东西#someDiv header ui li a:hover，你可以做一个搜索#someDiv，这会让你离得足够近，可以找到其余的东西。

希望有帮助:)

于 2013-02-09T10:35:10.687 回答
2

首先，不要过多考虑 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。虽然 sass 是明显的赢家，但我习惯了 less，因为我学会了 twitter bootstrap，它是用 less 构建的。没关系，开始使用 css 预处理器的改进比在 less 或 sass 之间进行选择要大得多。

于 2013-02-08T19:13:35.070 回答
1

您的问题似乎是设计师的“一般”困惑。设计 CSS 的最佳方式是你应该足够清楚哪个类将应用于什么？如果你想对不同的元素应用不同的属性（比如你想为div设置width=40px，为span设置50px），那么你应该创建一个新的css类，但是如果你的所有属性都相同，那就继续现有的！

添加 po[roperty 的最佳方法是，如果必须向单个元素添加新属性，请使用内联 css。这将有助于您维护样式表的格式。例子：

<div class="divcss" style="height:35px">
于 2013-02-09T04:40:17.477 回答
1

在编写更好、更易于维护的 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 代码都是有效的 Less 代码。除了，你可以做更多。让我们看一下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
}

这里有一篇关于 Less 的所有特性的非常精彩的文章，这只是你可以用 Less 做的一小部分，但我想说的是，你不必害怕跳入动态CSS 语言。

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

于 2013-02-12T12:46:13.320 回答
1

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

您所问的是更多关于您正在定义的新 CSS 类的用法。这就像一张桌子、一把椅子和一棵树是用木头做的，但椅子也可以有不同于它们共同属性的颜色。这就是 OOCSS 的用武之地。

上面的例子可能不是很好，但我希望你能明白我想说的。如果您希望向现有样式添加新属性，则由您决定如何操作。但是，如果您想赋予您的风格以意义，那么您需要整理一下。

奖金

您绝对应该浏览 Stubbornella 的Object Oriented CSS的整个 wiki 。您可能会发现该存储库上的提交非常陈旧，但它们已成为许多基于 OOCSS 的框架的基础。

我个人是inuit.css的忠实粉丝。它是我遇到过的最强大的 CSS 框架，而且绝对令人兴奋。它使您可以完全控制您的设计并保持干燥。

于 2013-02-12T21:07:03.643 回答
0

您可以使用特定类名作为默认或通用样式设置规则，以便您可以针对特定的 id、类或标签。

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

只需添加以逗号分隔的类或 div (.a, .b, #c) 您要应用的任何属性。

于 2013-01-29T14:24:31.140 回答
0

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

.dis-inblck{display:inline-block;}
.color-w{color:#fff;}
于 2013-02-13T16:14:37.157 回答