代码之家 › 专栏 › 技术社区 › Ash

误用CSS类属性,还是有效的设计模式?

oop css html jquery javascript

Ash · 技术社区 · 16 年前

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

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

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

class属性现在不仅负责指示元素的外观(视觉状态),还负责指示其行为。因此,我经常使用这种方法,将CSS类名更多地定义为伪面向对象类,而不是纯视觉CSS类。换句话说,每个类都表示状态(CSS样式)和行为(事件)。

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

问题:这是对CSS“class”属性的严重误用吗?如果是,为什么?

11 回复 | 直到 16 年前

BC. 16 年前

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

ohnoes 16 年前

这样做是完全有效的方法。
类属性不定义行为——JS通过CSS定义行为 选择器
规则

Noel Walters 16 年前

我认为它完全有效。

我试图坚持的唯一规则是类名应该具有语义值。如果你不想,他们不需要任何相关的CSS或JavaScript。只要让类名描述内容即可。

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

好的类名:

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

你可以将任何你想要的风格和行为附加到这些类中,并提出一个更加一致和可维护的设计。例如,尝试为“brightRed”定义一种口语风格。

Adam Bellaire 16 年前

Gary Green 16 年前

这是一个颇具争议的话题,所以这正是我要讨论的。

mdja 16 年前

本应

我想说,如果一个类只被jQuery使用,而不是被CSS使用,那么有一个明确的命名约定来指示用法是很好的——如果不是为了你自己,那么至少对于任何可能使用你的代码的人来说,看到一个没有在CSS中引用的类,然后删除它:)

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

通过这种方式,您可以轻松地概括行为的命名约定(也可能为它们编写JS代码)。

此外,通过使用CSS来定义不同状态的表示,你的JS代码比通过JS来管理要优雅得多。如:

$('div.toolTip').addClass('open');

而不是

$('div.toolTip').css({display:'block'…etc});

ps.我不认为这是进入阶级与身份证问题的地方,这真的是一场不同的辩论!

Joel Coehoorn 16 年前

这取决于你所说的“行为”是什么意思。例如,如果你的行为真的只是一种花哨的造型效果,我可能会让它作为一种更高级的风格来滑动。

否则,我仍然认为这没问题,但我可能会定义一个单独的(空的)css类来控制行为,以保持关注点的分离。

Aaron Digulla 16 年前

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

Corey 16 年前

我一直在想这个。现在,我认为多个类仍然是最好的方法,正如人们所说,这是正确的。但是,当你有一百个元素时,它会导致DOM混乱,比如:

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

有些东西,比如标志,你可以用jQuery中的data()方法赋值。我很想看到jQuery的data()演变成一个像我们使用类一样的工具。

user58777 user58777 16 年前

.JsButton{…}

另一种约定是,css类和id通常只使用小写字母(注意,有些浏览器区分大小写!),而Javascript绑定类则使用Camel套管。

这一切的原因是,通常情况下,与行为相关的类会方便地采用样式规则。

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

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

sqykly 13 年前

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