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来声明类，所以在你的情况下，“目标”类确实实际存在于那些特定元素上，并且你的标记完全有效。

这并不一定意味着您需要在HTML中声明一个类，然后才能在CSS中使用它。请参阅ruakh的评论。选择器是否有效depends entirely on the selector syntax，并且CSS有自己的rules for handling parsing errors集合，其中没有一个涉及标记。从本质上讲，这意味着HTML和CSS在有效性方面完全相互独立。¹

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

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

¹ _{这也是a CSS ID selector matches all elements with the given ID regardless ID出现一次或多次（导致不符合HTML文档）的原因。} < / p>

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

Answer 2

使用没有样式的类没有不良影响。实际上，CSS的有用性的一部分是它从标记中解耦并且可以样式或不样式元素/类/等。根据需要。

不要将它们视为“CSS类”。将它们视为“类”，如果需要，CSS也会使用它。

Answer 3

根据HTML5 specification：

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

此外，在version 4：

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


作为样式表选择器（当作者希望分配样式时）   信息到一组元素）。

用于通用处理   用户代理。

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

Answer 4

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

CSS文件中引用的类不是类的定义，它用作样式目的的selector rule。

Answer 5

当您在JavaScript中使用类名时，不会查看CSS以查找该类。它直接在HTML代码中查找。

所需要的只是classname在HTML中。 不需要在CSS中。

事实上，很多人认为它实际上是a good idea to keep separate classes use with CSS and Javascript，因为它允许你的设计师和编码人员独立工作，而不会通过互相使用彼此的课程来互相帮助。

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

Answer 6

您可以使用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样式规则会导致任何副作用吗？无论如何。

有更好的方法吗？性能方面，是的，有！！/ / p>

如何改善性能？

而不是直接修改每个元素的style，而不是pre-define a new class and add that to your matched elements using addClass()（另一个jQuery方法）。

基于将css()与addClass()进行比较的this pre-existing JSPerf，我们可以看到addClass()实际上要快得多：

css() vs addClass()

我们如何自己实施？

首先，我们可以添加新的CSS声明：

.hidden {
    display: none;
}

您的HTML将保持不变，这个预定义的类就位，以便以后使用。

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

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

运行此代码时，不是直接修改每个匹配的“target”元素的style属性，而是添加了这个新类：

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

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

Answer 10

正如许多其他人所提到的，是的，使用没有指定CSS的类是完全有效的，而不是将它们视为＆＃39; CSS类＆＃39;您应该简单地将类和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属性也有效。

Answer 12

使用类来查询元素完全没有问题。我曾经给这样的类名sys-前缀（例如，我将你的类命名为sys-target），以区别于用于样式的类。这是过去一些微软开发人员使用的惯例。我还注意到为此目的使用js-前缀的做法越来越多。

如果您不习惯将类用于样式以外的目的，我建议使用Role.js jQuery插件，它允许您使用role属性实现相同的目的，因此，您可以编写您的标记为<td role="target">并使用$("@target")进行查询。项目页面有很好的描述和例子。我将这个插件用于大型项目，因为我非常喜欢只为样式目的而保留类。

Answer 13

请参阅jQuery验证引擎。即使在那里，我们也使用不存在的类来添加HTML属性的验证规则。因此，使用未在样式表中实际声明的类没有任何问题。

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

13 个答案:

如何改善性能？

我们如何自己实施？