我可以使用不存在的CSS类吗?


260

我有一个表,其中通过不存在的CSS类通过jQuery显示/隐藏整列:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

有了这个DOM,我可以通过jQuery在一行中完成此操作: $('.target').css('display','none');

这很好用,但是使用未定义的CSS类是否有效?我应该为此创建一个空类吗?

<style>.target{}</style>

是否有任何副作用或有更好的方法来做到这一点?


9
我没有发现任何错误,尽管我将它尽可能地.css设置为样式表的一部分,而不是使用,但很难覆盖以.css设置的样式而不会引起其他问题,因此我倾向于避免使用它们。
凯文B

8
作为一个旁注,您可能想使用.toggle(),它在您的代码中短了一点。
数学冷却器

4
在Visual Studio + ReSharper中,如果您使用未定义的类,则会向您发出警告,这在我遇到拼写错误时会很有帮助,但在这种情况下很烦人。在这种情况下,您可以选择添加空白样式,或者禁用警告(或忽略警告)-就我个人而言,我只是添加空白样式。我不知道是否有其他IDE的行为类似。
Joe Enos 2013年

8
不仅可能,而且有人明确建议。由于您target的目的是出于javascript的目的,因此很多人将前缀js-用于此类js-target。顺便说一句:目标是一个坏名字;)如需进一步阅读,请参见:philipwalton.com/articles/decoupling-html-css-and-javascript
k0pernikus 2013年

1
stackoverflow.com/questions/2832117/…几乎是重复的,没有误解。
naught101

Answers:


491

“ CSS类”是用词不当;class是您分配给HTML元素的属性(或就脚本而言的属性)。换句话说,你在你的情况下,“目标”类HTML,CSS不申报类,所以不会在这些特定元素的事实存在,并且您的标记是完全有效的,因为它是。

这并不一定意味着您需要先在HTML中声明一个类,然后才能在CSS中使用它。请参阅ruakh的评论。选择器是否有效完全取决于选择器语法,并且CSS具有自己的规则来处理解析错误,而这些规则都与标记无关。从本质上讲,这意味着HTML和CSS在有效性方面完全相互独立。1个

一旦了解了这一点,就很清楚.target在样式表中不定义规则没有副作用。2在为元素分配类时,可以在样式表或脚本中或在这两者中按这些类引用这些元素。两者都不依赖对方。相反,它们都引用标记(或更准确地说,是DOM表示)。即使您使用JavaScript来应用样式(如在jQuery单行代码中所做的那样),该原则也适用。

当您使用类选择器编写CSS规则时,您的意思是“我想将样式应用于属于该类的元素”。同样,当编写脚本以按某个类名检索元素时,您的意思是“我想使用属于该类的元素来做事”。是否存在元素属于有问题的类是一个单独的问题完全。


1 这也是CSS ID选择器将所有具有给定ID的元素匹配的原因,无论ID是显示一次还是多次(导致不合格的HTML文档)。

2 我唯一知道的情况是,当某些浏览器由于错误而拒绝适当地应用某些其他规则时,就需要一个空的CSS规则。创建空规则将由于某些原因而导致应用其他规则。有关此类错误的示例,请参见此答案。但是,这是在CSS方面,因此应该与标记无关。


5
我花了很长时间才意识到类与CSS无关。但是几乎在同一时间,其他所有人都意识到了微格式的出现。
康拉德·鲁道夫,

13
+1,尽管可以将这个答案视为错误地暗示CSS只能引用HTML中实际出现的类。一个站点在所有页面上都使用站点范围的CSS实际上是很普遍的,即使它所引用的某些类并未出现在每个页面上。(例如,a.extlink即使某些页面不包含任何外部链接,该网站也可能具有外部链接的自定义样式。)
ruakh 2013年

1
@ruakh:很好,谢谢。在没有偏离主题的情况下,我找不到适合它的原始简短回答的方法,但是我看到使用术语“依赖项”可能会给人以那种印象,所以我做了一些改动。也就是说,我已经添加了一个脚注,以引用您的评论并进行进一步的阐述。
BoltClock

66

使用没有样式的类不会有不良影响。实际上,CSS有用的部分在于它与标记分离,并且可以设置样式或不设置样式元素/类/等。如所须。

不要将它们视为“ CSS类”。将它们视为“类”,如果需要,CSS也可以使用它们。


11
+1表示“不要将它们视为“ CSS类”。可以将它们视为“类”,如果需要,CSS也可以使用这些“类”
laike9m 2013年

48

根据HTML5规范

类属性必须具有一个值,该值是一组用空格分隔的标记,代表该元素所属的各种类。...对作者可以在class属性中使用的令牌没有其他限制,但是鼓励作者使用描述内容性质的值,而不是描述内容期望呈现的值。

另外,在版本4中

class属性在HTML中具有多个角色:

  • 作为样式表选择器(当作者希望将样式信息分配给一组元素时)。
  • 用于用户代理的通用处理。

您的用例属于第二种情况,这使其成为使用class属性的合理示例。


13
+1以引用相关规范。我忘记了很多。
BoltClock

40

您可以使用没有样式的类,这完全是有效的HTML。

CSS文件中引用的类不是类的定义,而是用作样式选择器规则


25

在JavaScript中使用类名时,它不会查看CSS来找到该类。它直接在HTML代码中查找。

所需要的只是类名在HTML中。它不需要在CSS中。

实际上,许多人认为将单独的类与CSS和Javascript一起使用实际上是一个好主意,因为它允许您的设计人员和编码人员独立工作,而又不会因为使用彼此的类而互相妨碍。

(请注意,以上段落显然更适用于大型项目,因此,如果您自己工作,不必觉得这太极端了;我提到这一点是为了指出两者可以完全分开)


13

您可以在不使用CSS类的情况下使用它,但是我建议,如果仅为JavaScript / jQuery代码添加CSS类,请在js-YourClassName其前面加上前缀,以便前端开发人员不要使用这些类来设置元素的样式。他们应该了解可以随时删除这些类。


10

在将类添加到HTML中后,即会定义类,因此您的解决方案就可以了


7
在HTML中使用类不会定义它。我想说的是,定义是无关紧要的:使用未定义的类没有任何惩罚。
2013年

10

不必在样式表中定义CSS类。它应该工作正常。但是,添加它不会有害。


我不是说要添加这些样式,如果他愿意,可以添加到他身上,如果他打算支持这些样式,那为什么不呢?无论如何,谢谢你不必要的
不赞成

您说过“……不会造成伤害”,但最终会。
2013年

是的,这不会造成伤害。如果他有添加这些空样式的感觉,那么显然就会有管理它们的感觉。显然,我不会添加..我也不建议添加。
拉米兹

8

这里没有人充分提及的一件事是JavaScript(在本例中为jQuery辅助)无法直接修改文档的级联样式表。jQuery的css()方法仅更改匹配的元素style属性集。CSS和JavaScript在这方面是完全无关的。

$('.target').css('display','none');完全不会更改您的.target { }CSS声明。相反,这里发生的是任何带有class“ target”的元素现在看起来都像这样:

<element class="target" style="display:none;"></element>

是否由于未预先定义CSS样式规则而导致任何副作用?没有任何。

有一个更好的方法吗?性能方面,是的!

如何提高性能?

style您可以直接定义一个新类,然后使用addClass()(另一个jQuery方法)将其添加到匹配的元素中,而不是直接修改每个元素的。

根据与进行比较的这个预先存在的JSPerf,我们可以看到它实际上要快得多:css()addClass()addClass()

css()与addClass()

我们如何自己实现呢?

首先,我们可以添加新的CSS声明:

.hidden {
    display: none;
}

您的HTML将保持不变,该预定义的类仅在适当位置以备后用。

现在,我们可以修改JavaScript以addClass()代替使用:

$('.target').addClass('hidden');

运行此代码时,style现在将添加以下新类,而不是直接修改每个匹配的“目标”元素的属性:

<element class="target hidden"></element>

使用新的“隐藏”类,此元素将继承CSS中声明的样式,并且您的元素将设置为不再显示。


好建议。很少有理由使用.css()而不是切换IMO类。
BoltClock

6

正如许多其他人所提到的,是的,使用没有分配CSS的类是完全有效的,而不是将它们视为“ CSS类”,而应该将它们分别视为组和单个元素,而不是将它们视为“ CSS类”。

我想参与其中,因为我觉得在此示例中并没有提出重要的观点。如果您需要对可变长度的元素进行可视化操作(在这种情况下,您正在使用表行),那么总是有必要认识到通过Javascript进行操作的成本可能非常昂贵(例如,如果您有数千行)。

假设在这种情况下,我们知道第2列总是有可能被隐藏(这是表的自觉功能),那么设计CSS样式来处理此用例就很有意义。

table.target-hidden .target { display: none; }

然后,无需使用JS遍历DOM查找N个元素,我们只需要在一个(我们的表)上切换一个类。

$("table").addClass("target-hidden")

通过为表分配一个ID,这将更快,您甚至可以使用:nth-child选择器来引用该列,这将进一步减少您的标记,但是我无法评论效率。这样做的另一个原因是,我讨厌内联样式,并且会竭尽全力消除它!


1
为“组和单个元素” +1和有效使用文档结构
+1

5

如果将类应用于HTML元素,并且该类未在CSS中定义,则该方法将无效。这是一种常见的做法,就像Aamir afridi所说,如果您仅将类用于js,则将js-作为前缀是一个好习惯。

它不仅适用于calsses,而且适用于html元素的id属性。


4

使用类仅查询元素完全没有问题。我曾经给这样的类名加上sys-前缀(例如,我将为您的class命名sys-target),以区别于用于样式的类。这是过去某些Microsoft开发人员使用的约定。我还注意到了js-为此目的使用前缀的越来越多的实践。

如果您不习惯将类用于样式之外的其他用途,建议您使用Role.js jQuery插件,该插件可让您使用role属性达到相同的目的,因此,您可以将标记编写为<td role="target">并使用进行查询$("@target")。项目页面上有很好的描述和示例。我将此插件用于大型项目,因为我真的很喜欢仅出于样式目的保留类。


3

请参阅jQuery验证引擎。即使在此处,我们也使用不存在的类在HTML属性上添加验证规则。因此,使用未在样式表中实际声明的类没有任何错误。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.