全局 CSS 助手类是个好主意吗？ [关闭]答案

【问题标题】：Are global CSS helper classes a good idea? [closed]全局 CSS 助手类是个好主意吗？ [关闭]
【发布时间】：2022-01-17 08:50:04
【问题描述】：

假设我有一种颜色，我知道我会在网站中大量使用。

我可以在各种 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。

【问题讨论】：

你应该试试less。
如果你只推荐1个CSS预处理器，至少推荐一个好的。 LESS 在几乎所有方面都小于。
@cimmanon 这就是 LESS 的重点，就像在 KISS principle 中一样。当您只需要一个允许嵌套规则的简单预处理器和一些允许 DRY 的简单宏时，不要使用复杂系统的 5%。我不需要 SASS，我不想强迫我的非开发人员同事使用它。 LESS 与另一个预处理器一样好取决于您的要求。 YMMV（这里是 OT）
据我所知，这个问题有一个明确的答案。使用 CSS 预处理器语言，允许您在 CSS 中使用变量。

标签： html css architecture

【解决方案1】：

我个人认为根据类的属性命名类并不是一个好主意，例如 .green 用于绿色文本。相反，请使用限定符，例如 .approved 表示绿色文本，.warning 表示警告、警报等。

在我看来，选择器（类、ID）应该反映元素的角色/目的，而不是它们的外观。例如，如果您想重新设计您的网站并采用新的配色方案，并且您的导航菜单从绿色变为蓝色 - 那么，.green 选择器将没有什么意义，并且对于任何人来说都很难理解将来接手该项目（如果有的话）。

此外，没有理由将.green 类分配给导航登录<div>，如果您已经可以使用.nav-login 指定它。

Chris Coyier 编写了一个相当全面的CSS style guide - 这不是黄金法则，但最好遵循。

【讨论】：

啊，它不一定是绿色的。例如，它可能是 master_leading_brand_colour。啊，现在我越来越少+ sass。如果我可以在我的 CSS 中定义变量，那么我可以通过变量来改变颜色。酷。

【解决方案2】：

如果您还没有，请查看OOCSS（和Smashing Mag introduction to it））。也来自 Yandex 的BEM - 再次Smashing Mag intro to it。

几年前，如果 Nicole “stubbornella” Sullivan 在我参加的一次会议上发表了关于它的演讲，我会一直嘲笑没有严格区分内容 (HTML) 和样式 (CSS) 的想法，但现在我正在处理由几十个页面组成的项目，我们必须为几个人的团队中的客户从 PSD 转到 HTML/CSS，我的要求已经发生了巨大的变化！独自处理没有其他人会修改的 CSS或在初创公司的单个项目中的团队中或在将重用您创建的 CSS 的客户的团队中完全不一样。

了解 OOCSS 以及它可以为您做什么，试一试，如果不合适，请不要在您的项目中使用它。或者做。

这里是否使用 CSS 预处理器无关紧要：如果您使用它们来输出 1 公里长的选择器，那么显然您使用它们是错误的。它们只是一种更快、更轻松地编写 CSS 的方法（由于宏，不必费心去了解每个 CSS3 属性需要哪个前缀很棒，但它们仍然应该输出与以前或多或少相同的 CSS）。重点是编写高效的 CSS，有或没有预处理器。与 ZenCoding/Emmet 相同：当您厌倦了日复一日地编写相同的重复行/指令时，您知道您需要它。但他们会输出这些相同的 CSS 行，这里没有什么神奇之处。

【讨论】：

【解决方案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;
}

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：