全局CSS助手类是个好主意吗？

Question

假设我有一个颜色在网站中会经常使用。

我可以在各种CSS类中多次定义这个颜色，也可以

.nav-login { color:#green; other CSS content....... }

或者

.green {color:green;}
.nav-login { other CSS content....... }

<div class="nav-login green">stuff</div>

那么问题是，你应该使用辅助 CSS 类还是定义所有特定的样式？

从理论上讲，通过编写更多的 CSS 和较少的 HTML，您将在长期内节省带宽，然而，我发现在 HTML 中应用辅助 CSS 类的方法很令人愉悦，就像在设计感上编写语义化的 CSS 一样。

- Chris Barry

---

你应该尝试使用less。 - Rob

如果你只想推荐一个CSS预处理器，至少要推荐一个好的。在几乎所有方面，LESS都比Sass差。 - cimmanon

@cimmanon 这就是 LESS 的优点，就像 KISS 原则 一样。当你只需要一个简单的预处理器来允许嵌套规则和一些简单的宏以实现 DRY 时，不要使用复杂系统的5%。我不需要 SASS，也不想强迫我的非开发同事使用它。根据您的要求，LESS 和其他预处理器一样好。YMMV（这与本主题无关）。 - FelipeAls

就我所见，这个问题有一个明确的答案。使用CSS预处理语言，可以让您在整个CSS中使用变量。 - Chris Barry

Answer 1

我个人认为基于属性来命名类名并不是一个好主意，比如使用.green来表示绿色文本。相反，使用限定词，比如.approved表示绿色文本，.warning表示警告、提醒等。

在我看来，选择器（类、ID）应该反映元素的角色/用途，而不是它们的外观。举例来说，如果你想重新设计你的网站并采用新的配色方案，你的导航菜单从绿色变成蓝色，那么.green选择器的意义就非常小了，如果有人接手这个项目，理解起来也很困难。

此外，如果可以使用.nav-login来指定导航登录<div>，那么就没有必要对其分配.green类。

Chris Coyier编写了一份相当全面的CSS样式指南——它并不是黄金法则，但遵循它是有好处的。

- Terry

---

啊，它不一定非得是绿色。例如，它可以是master_leading_brand_colour。啊，现在我少了一些Sass。如果我可以在我的CSS中定义变量，那么我只需要通过一个变量来改变颜色。很酷。 - Chris Barry

Answer 2

如果你还没有看过OOCSS（以及Smashing Mag对其的介绍），建议你去看一下。此外，还有来自Yandex的BEM - 同样可以参考Smashing Mag对其的介绍。

几年前，我曾经嘲笑过不将内容（HTML）与样式（CSS）严格分离的想法。当时我参加了一场会议，Nicole "stubbornella" Sullivan 在会上做了一个关于这个主题的演讲，我感到很困惑。但现在，我正在处理由数十个页面组成的项目，我们必须从PSD转换为HTML/CSS，并在由几个人组成的团队中为客户工作，我的需求已经发生了巨大变化！

独自工作于无人修改的CSS 或 在初创公司的单个项目中与团队合作 或 为客户的团队工作，他们将重用您创建的CSS，这些情况都是完全不同的。

学习OOCSS及其对您的作用，尝试使用它，如果不适合您的项目，请勿使用。或者您可以使用。

在这里，使用CSS预处理器或不使用都不太相关：如果您使用它们输出1千米长的选择器，那显然是使用不当。它们只是一种更快、更轻松地编写CSS的方式（不必为每个CSS3属性学习需要哪些前缀，感谢宏），但它们仍应输出大致相同的CSS。重点是编写高效的CSS，无论是否使用预处理器。ZenCoding/Emmet也是如此：当您厌倦了每天编写相同的重复行/指令时，您就知道自己需要它。但它们将输出这些相同的CSS行，没有任何神奇之处。

- FelipeAls

Answer 3

实际上，这是一个不错的想法。我也在使用它们，但我没有按照你说的方式命名它们。teddyrised的例子很好。

举个例子，当我制作一个简单的项目，不需要庞大的页面结构和最小化的CSS时，我会像这样命名它们：

.push-right {
    float: right;
}

push-left {
    float: left;
}

.no-float {
    float: none;
}

.centered {
    margin: 0 auto;
}

.success {
    color: green;
}

.error {
    color: red;
}

.warning {
    color: orange;
}

.info {
    color: blue;
}

所以实际上可以使用它们。只要注意命名即可 :)

- user1130272

Answer 4

我将为您的问题提供完全不同的解决方案。使用Less。

使用它，您将能够定义变量和许多其他很酷的东西。

变量允许您在一个地方指定广泛使用的值，然后在整个样式表中重复使用它们，使全局更改变得像更改一行代码那样容易。

- epoch