Question

说我有一种颜色，我知道我会在网站上使用很多。

我可以在各种CSS类的

中多次定义颜色

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

或者

.green {color:green;}
.nav-login { other css....... }

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

所以概念是，你应该使用辅助CSS类还是应该定义特定的一切。

理论上，通过编写更多的CSS和更少的HTML，您可以长期节省带宽，但我发现在HTML中应用辅助CSS类的方法，就像您在设计意义上编写语义CSS一样。 / p>

Answer 1

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

在我看来，选择器（类，ID）应该反映元素的作用/目的，而不是它们的外观。比如说，如果你想重新设计你的网站并采用一种新的配色方案，导航菜单从绿色变为蓝色 - 那么，.green选择器的含义很少，而且很难理解谁将来接管该项目，如果有的话。

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

克里斯·科伊尔（Chris Coyier）编写了一篇相当全面的CSS style guide - 这不是黄金法则，但它很适合。

Answer 2

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

几年前，我一直嘲笑不严格将内容（HTML）与风格（CSS）分开的想法，当Nicole“stubbornella”Sullivan在我参加的一个会议上发表了关于它的讨论时，我摸不着头脑。既然我正在处理由几十页组成的项目，我们必须从PSD转到HTML / CSS，为一些人的团队中的客户，我的要求已经彻底改变了！单独使用CSS，没有其他人可以在团队中的单个项目中的团队中修改或或，以便客户端重用您创建的CSS完全一样。

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

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

Answer 3

实际上这是一个好主意，我也使用它们，但不要按照你说的方式命名，喜欢示例好，

就我的例子而言，当我制作一个简单的项目时，不需要庞大的页面结构和最小的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;
}

所以实际上它可以使用它们，只是为了命名它们：）

Answer 4

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

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

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

全局CSS帮助程序类是一个好主意吗？

4 个答案: