将HTML类用于分配CSS，这是一个好的做法还是坏的做法？

Question

将HTML类用于分配CSS，这是一个好的做法还是坏的做法？

4

我正在处理一个项目，其中开发团队已将其图形工作外包给第三方。第三方开发的CSS文件充斥着代码，可以让开发人员使用HTML类将单个CSS声明分配到HTML元素中。

例如：

.padding-bottom-10 {
    padding-bottom: 10px;
}

我有两个问题：

这种设置被认为是懒惰编程吗？
这种设置常见吗？

- ajain

1

明显的命名约定违背了层次化属性系统（如CSS）和结构与表现分离的核心原则 - 当然，这只是我的个人意见。 - collapsar

6

我认为这并非基于观点的言论：http://www.w3.org/QA/Tips/goodclassnames。使用这些非语义化的类名会存在问题，因为如果设计在将来发生变化或在特定响应式设计中不相关，则它们将毫无意义。如果该元素不再需要底部填充10px，则需要重写为类似`.padding-bottom-10 { padding-bottom: 0; }`这样的内容，这是没有意义的。 - Mister Epic

2

很遗憾，这种情况有点普遍，因为像Bootstrap这样的流行CSS“框架”进行了宣传。但是这违反了关注点分离原则——一旦您想要更改特定HTML元素的格式，您就开始交换类（而在理想世界中，您将保留HTML不变，仅更改CSS）。 - CBroe

1

我应该指出，即使在一些最好的Web框架中，这也是很常见的。我不想被指责为绝对主义者，但我会尽可能地追求语义意义。 - Mister Epic

你的示例有些懒惰，但好的类名以及一致且设计良好的基础元素样式是良好样式表的基础。 - Anthony

显示剩余4条评论

4个回答

0

这是OOCSS方法论中的一个修饰符。

它提倡软件开发中的DRY原则。当正确应用时，它可以提高可维护性，因为特定的属性值对不会在代码的其他部分重复出现。

然而，你的示例命名相当糟糕。padding-bottom-small或padding-bottom-med将是一种改进和更具未来性，因为给定的常量值可能会改变，名称中的常量将不再准确。

在标记中添加非语义类名的确有缺点，这使得HTML难以维护。DRY的好处通常超过了这个缺点。此外，预处理器允许在CSS中纯粹进行OOCSS开发（例如使用Sass的@extend指令和Less的:extend伪类），而不会用非语义类名污染标记。

参考文献

注意

这只是编写高效CSS范例的一部分。它是否最适合您的使用情况取决于应用程序需求和开发人员的偏好。

- Fabrício Matté

显然，这是一种常见的CSS开发方法，如果事先考虑周全，它非常强大。我的具体例子是100多个类中只有一个CSS声明，所以我愿意猜测这是一个极端的例子，没有完全采用OOCSS。 - ajain

我个人不喜欢未使用的类，因为会浪费一些带宽（我通常在需要时创建修饰符），但是拥有一个现成的可重用修饰符集也不算太糟糕。 :) - Fabrício Matté

0

为什么不呢？如果你的网页面向非常老旧的IE版本，使用它们有时是必要的。例如，IE 6不知道直接子选择器（>），7和8仍然不知道:last-child等许多选择器...

- Kovo

0

如果要在很多元素上使用定义同一事物的多个类，则我们不妨时光倒流回到90年代，开始使用一些文本和内容，因为如果使用适当的类，则重新设计站点甚至其中的一部分需要时间，这些时间可以更好地用于喝啤酒。

- Eeji

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

当（滥用）使用类选择器时，您必须注意规范中的以下注释：

由于CSS赋予“类”属性相当大的能力，作者可以构建基于几乎没有相关呈现的元素（例如HTML中的DIV和SPAN）的自己的“文档语言”，并通过“类”属性分配样式信息。由于文档语言的结构元素通常具有被认可和接受的含义，因此作者应避免使用这种做法，而不是定义自己的类。

但是，滥用类选择器是很普遍的。