向HTML元素添加大量CSS类

Question

我有一个留言板，我的一个用户编写了一个greasemonkey脚本来设置页面中各种元素的样式。他做得很好但是为了让他的工作更轻松，他的脚本的第一步是解析当前页面并向页面上的几乎所有html元素添加几个css类。他们中的大多数根本不习惯于对页面进行样式设置，而是让他更容易查询他将实际修改的每页的几个元素。例如 class =＆quot; thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345＆quot; etc etc

这是标准做法吗？在javascript中添加大量不必要的css类是否有任何缺点，或者如果我要将它们添加到服务页面，则在服务器上添加它们。

Answer 1

这看起来是使用类将任意元数据嵌入到元素中，这肯定不是类属性的设计目的。鉴于它的效果以一个greasemonkey脚本开始和结束并因此本地化到客户端，它似乎是一个无害的黑客，但不是我建议在服务器端重复。

遗憾的是，当涉及除了无效属性之外的元数据时，HTML并没有提供替代方式，因此有一种机制可以为“类”添加语义含义。现有标签内的属性 - 即微格式。围绕微格式有很多令人费解的热门话题，但总的来说，它们围绕着一个最佳实践，围绕着全面的xml是不可能的。

Answer 2

就语义而言，是的还有缺点。如果您的课程不能描述该元素的实际内容，并且仅用于样式目的，那么如果您决定重新设计和/或重组，这可能会对您造成伤害。

例如，BAD：

<div class="header red left-side">

好的：

<div class="header main current-event">

Answer 3

如果没有与分配给元素的类相关联的样式，那么我相信浏览器会忽略它。因此，如果您担心的话，它不会增加您的页面处理时间。

但是，如果每个元素都有很多很多类，那么你必须意识到你正在使用有价值的带宽，并增加了以这种方式加载整个页面所需的时间。您可以通过外部化CSS来避免这个问题，以便浏览器可以缓存它。

您是否使用jquery查询您真正想要修改的元素？事实证明，使用标准JavaScript看起来很难或不可能的jquery选择器更容易选择那些元素，因此你可以避免所有这些额外的不必要的类。

总而言之，如果需要使用大量的课程没有问题，这对于制作来说非常好，但是如果你不需要它们，就像你的情况一样，你必须有一个更好的解决方案。可能会想出来。

Answer 4

仅仅为了一个数据点，我昨天看了看GMail的HTML（它们的按钮非常好）并且它充满了这种东西。

以下是一个例子：

class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"

Answer 5

类不仅适用于CSS，而且适用于标记部分的分类。基于该分类应用样式只是一种用途。因此，如果这些类对其他分类目的有用，那么这很好，并且是非常好的实践。