8

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

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

4

4 回答 4

3

如果您还没有，请查看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 行，这里没有什么神奇的。

于 2013-02-24T19:15:25.260 回答
3

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

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

此外，没有理由为.green导航登录分配一个类<div>，如果您已经可以使用.nav-login.

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

于 2013-02-24T17:48:04.820 回答
2

实际上，这是个好主意。我也使用它们，但我没有按照你说的方式命名它们。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;
}

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

于 2013-02-24T18:12:38.047 回答
0

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

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

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

于 2013-02-24T17:48:28.953 回答