Question

正如您可能已经知道的那样，在JQuery中选择文档中具有特定CSS类的所有元素很简单，然后使用链接为所选元素分配公共事件处理程序：

$(".toolWindow").click(toolWindow_click);
$(".toolWindow").keypress(toolWindow_keypress);

像往常一样，“toolWindow”类通常也在CSS中定义并与某些视觉样式相关联：

.toolWindow{
   color:blue;
   background-color:white;
}

class属性现在不仅要指示元素的外观（可视状态），还要指示行为。因此，我经常使用这种方法并将CSS类名称更多地定义为伪对象类，然后仅视觉化CSS类。换句话说，每个类都代表状态（CSS样式）和行为（事件）。

在某些情况下，我甚至创建了没有视觉样式的类，只是将它们用作为元素分配行为的便捷方式。

此外，jQuery LiveQuery插件（以及live（）内置函数）通过自动将事件绑定到属于特定类的动态创建元素，使这种方法更加有效。

最近我主要使用类名来定义关联DOM元素的一组公共行为，并且稍后使用它们来定义视觉样式。

问题：这是一个可怕的滥用CSS“类”属性，如果是这样，为什么？

另一方面，也许这是一种非常有效的方法来进一步实现“关注点分离”并提高HTML / DHTML页面的可维护性？

Answer 1

“类”实际上是文档数据的一部分（希望语义相关），而不是它的样式或设计。

这就是为什么两者都可以使用的原因。

Answer 2

这是完全有效的方法。
类属性没有定义行为 - JS通过CSS 选择器（谢谢jQuery）。
类属性不定义视觉样式 - CSS 规则执行此操作。

Answer 3

我认为它非常有效。

我试图坚持的唯一规则是类名应具有语义值。如果您不想要它们，则无需使用任何关联的CSS或JavaScript。只需让类名描述内容即可。

错误的班级名称（根据我的规则）：

<span class="brightRedBold">Wear Protective Gloves</span>
<a class = "openInNewWindow" ...>

在我看来，这些与编写内联样式和javascript一样糟糕

好班级名称：

<span class="urgentWarning">Wear Protective Gloves</span>
<a class = "offSiteLink" ...>

您可以将所需的任何样式和行为附加到这些类，并提出更加一致和可维护的设计。例如，尝试为“brightRed”定义口语风格。

Answer 4

我认为它没有任何问题。为了安全起见，您始终可以确保用于行为的类与用于演示的类分开。

从根本上说，jQuery的优势在于它使用了CSS操作符的CSS选择器语法。该语法最初用于CSS，用于演示。然而，用它来定义行为（无论你是否选择类）已经证明是一种非常强大的技术。谁能反对呢？

Answer 5

我尝试尽可能使用ID并避免使用类。多数此外，这并不是说用它们很糟糕。但是我相信如果你使用ID，你的某种意义上就是被迫使用非常结构化和有意义的语义标记。 如果你每次需要一个元素以某种方式查看时吐出类 - 你可能做错了。

这是一个颇具争议的话题，所以这就是我扔进锅里的东西。

Answer 6

这是一种完美的声音方法，以及应该用于的类属性。

我想说如果一个类只被jQuery而不是CSS使用，那么有一个明确的命名约定来表示使用是很好的 - 如果不是你自己，那么至少对于那些可能正在使用你的代码的人来说，请参阅CSS中未引用的类，然后将其删除：）

我倾向于有一个特定的类名来标识一个对象的目的，而且往往是非常通用的声音，它们指定了一个对象的状态。例如

class =“toolTip” - 工具提示 class =“toolTip open” - 显示状态的工具提示

通过这种方式，您可以轻松地概括行为的命名约定（以及可能的JS代码）。

此外，通过使用CSS来定义不同状态的表示，您的JS代码比通过JS管理它更加优雅。例如：

$（ 'div.toolTip'）addClass（ '开放'）;

而不是

$（'div.toolTip'）。css（{display：'block'... etc etc}）;

PS。我不认为这是进入Class vs ID问题的地方，这真的是一个不同的辩论！

Answer 7

这取决于你对'行为'的意思。例如，如果你的行为真的只是一种奇特的造型效果，我可能会让它作为更高级的风格滑动。

否则，我仍然认为没关系，但我可能会定义一个单独的（空）css类来控制行为，以保持关注点的分离。

Answer 8

我用它来为仅数字字段安装按键过滤器。该类将是“数字”，“十进制”，“负十进制”或“十进制列表”（允许逗号和空格）。这也很容易阅读。

Answer 9

我一直在想这个。现在我认为多个班级仍然是最好的方法，正如人们所说，并非不正确。但是当你拥有一百个元素时，它会产生一个混乱的DOM，如果没有别的，

<div class="draggable sortable droppable list-item editable text">text</div>

你可以在jQuery中使用data（）方法分配一些东西，比如标志。我很高兴看到jQuery的数据（）演变成一个像我们如何使用类的工具。

Answer 10

作为一种惯例，我喜欢在我的类上使用前缀，以便我知道css文件中的一个类与Javascript代码相关联。例如，使用“Js”前缀：

.JsButton {...} .JsToggleElement {...}

另一个惯例是，通常只使用小写字母表示css类和id（请注意，某些浏览器区分大小写！），并将CamelCasing用于Javascript绑定类。

所有这一切的原因在于，与行为相关联的类通常会方便地采用样式规则。

我还考虑过纯粹为Javascript行为创建类，并使用seaprate类进行样式化，但这是很多分裂的东西。相反，我宁愿在Javascript代码中清楚地定义类：

mySuperObject =
{
    CSS_TOGGLE: 'JsToggle',
    CSS_HIDE:   'JsHide',

    initialize:function()
    {
        var elems = SomeJsLib.getElementsByClassname(document, 'a', this.CSS_TOGGLE);
        ...

Answer 11

真的，我不想在这次游行中下雨，因为它似乎是事实上的犹太人。但是，我也看到没有人在W3建议的部分底部提到http://www.w3.org/TR/2011/REC-css3-selectors-20110929/#class-html，而不是使用CSS类名来形成非标准的微语法。我认为他们主要警告我们不要制作一个完全由DIV和SPAN元素组成的页面，并使用不同的类作为自定义标签。他们没有特别提到行为的混合课程。

滥用CSS类属性或有效的设计模式？

11 个答案: