我可以使用非现有的CSS类吗？

Question

我有一个表,我通过一个不存在的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>

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

Answer 1

"CSS类"用词不当; class是您分配给HTML元素的属性(或脚本方面的属性).换句话说,你用HTML而不是CSS来声明类,所以在你的情况下,"target"类确实存在于那些特定元素上,并且你的标记完全有效.

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

一旦理解了这一点,很明显没有.target在样式表中定义规则的副作用.²将类分配给元素时,可以通过样式表或脚本或两者来引用这些元素.两者都没有依赖.相反,它们都引用标记(或者更确切地说,它的DOM表示).即使你使用JavaScript来应用样式,这个原则也适用,正如你在jQuery单行中所做的那样.

当您使用类选择器编写CSS规则时,您所说的只是"我想将样式应用于属于此类的元素".类似地,当您编写脚本以按特定类名检索元素时,您会说"我想使用属于此类的元素执行操作".是否有是说完全属于有问题的类是一个单独的问题元素.

¹ _{这也是CSS ID选择器匹配具有给定ID的所有元素的原因,无论ID是出现一次还是多次(导致不符合HTML的文档).}

² _{我所知道的唯一情况是,当一些浏览器因某个bug而拒绝正确应用某些其他规则时,需要这样的空CSS规则; 创建空规则将导致出于某种原因应用其他规则.有关此类错误的示例,请参阅此答案.然而,这是在CSS方面,因此应该与标记无关.}

Answer 2

使用没有样式的类没有不良影响.实际上,CSS的有用性的一部分是它从标记中解耦并且可以样式或不样式元素/类/等.如所须.

不要将它们视为"CSS类".将它们视为"类",如果需要,CSS也会使用它们.

Answer 3

根据HTML5规范:

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

另外,在版本4中:

class属性在HTML中有几个角色:

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

您的用例属于第二种情况,这使其成为使用类属性的合法示例.

Answer 4

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

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

Answer 5

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

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

实际上,很多人认为将单独的类与CSS和Javascript一起使用实际上是个好主意,因为它允许你的设计师和编码人员独立工作,而不会通过使用彼此的类来互相帮助.

(注意,上段显然更适用于较大的项目,所以如果你自己工作,不要觉得你必须走到这个极端;我提到这一点是为了说明两者可以完全分开)

Answer 6

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

Answer 7

在HTML中添加Class的那一刻,将定义Class,因此您的解决方案完全没问题

Answer 8

没有必要在样式表中定义CSS类.它应该工作得很好.但是,添加它不会有害.

Answer 9

这里没有人完全提到的一件事是JavaScript(在这种情况下由jQuery辅助)无法直接修改文档的级联样式表.jQuery的css()方法只是改变了匹配的元素style属性集.CSS和JavaScript在这方面完全不相关.

$('.target').css('display','none');根本不会改变你的.target { }CSS声明.这里发生的事情是,任何具有class"目标"的元素现在看起来像这样:

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

没有预先定义CSS样式规则会导致任何副作用吗？没有任何.

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

如何改善性能？

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

基于此预先存在的JSPerf其中比较css()有addClass(),我们可以看到,addClass()实际上是要快得多:

我们怎样才能自己实现呢？

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

.hidden {
    display: none;
}

您的HTML将保持不变,这个预定义的类只是适合以后使用.

我们现在可以修改要使用的JavaScript addClass():

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

运行此代码时,不是直接修改style每个匹配的"目标"元素的属性,而是添加了这个新类:

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

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

Answer 10

正如许多其他人所提到的,是的,使用没有指定CSS的类是完全有效的,而不是将它们视为"CSS类",您应该简单地将类和ID的语义分别识别为组和单个元素.

我想填写,因为我觉得在这个例子中没有提出重要的观点.如果您需要对可变长度的元素进行可视化操作(在这种情况下,您使用的是表行),那么通过Javascript执行此操作的成本可能非常昂贵(例如,如果您有)数千行).

在这种情况下,让我们知道第2列总是有可能被隐藏(它是你的表的有意识的功能)然后设计一个CSS样式来处理这个用例是有意义的.

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

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

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

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

Answer 11

如果在HTML元素上应用类,并且该类未在CSS中定义,则它将不起作用.这是一种常见的做法,就像Aamir afridi所说的那样,如果你只是为了js使用类,那么用js-作为前缀是个好习惯.

它不仅对calsses有效,而且对html元素的id属性也有效.