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

Question

我有一个表格，通过jQuery和一个不存在的CSS类来显示/隐藏整列：

<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>

通过jQuery，我可以使用这个DOM仅用一行代码来达到这个效果：$('.target').css('display','none');

这个方法很有效，但是使用未定义的CSS类是否合法呢？我应该为它创建一个空类吗？

<style>.target{}</style>

有副作用吗？或者有更好的方法来做这件事吗？

- totymedli

---

我认为这没有什么问题，但我希望它能够成为样式表的一部分，而不是使用“.css”文件。使用“.css”文件设置的样式很难被覆盖，容易引起其他问题，所以我倾向于避免使用它们。 - Kevin B

顺便提一下，你可能想使用.toggle()，这会让你的代码更短一点。 - Math chiller

在使用Visual Studio + ReSharper时，如果您使用了未定义的类，则会收到警告。这对于我只是打错字的情况非常有帮助，但在某些情况下却很烦人。在这种情况下，您可以选择添加空样式或禁用警告（或忽略它）-就个人而言，我会添加空样式。我不知道其他任何IDE是否表现类似。 - Joe Enos

有些人不仅认为这是可能的，而且明确建议这样做。由于您的“目标”是用于JavaScript的目的，许多人使用前缀“js-”来命名这些类，例如“js-target”。顺便说一句：Target是一个不太好的名称。有关更多信息，请参见：http://philipwalton.com/articles/decoupling-html-css-and-javascript/。 - k0pernikus

https://dev59.com/_XE85IYBdhLWcg3wVR2g 或多或少是一个没有误解的副本。 - naught101

Answer 1

“CSS类”是一个错误的称呼；class是一种你分配给HTML元素的属性（或者在脚本方面来说，是一种属性）。换句话说，你在HTML中声明类，而不是CSS，因此在你的情况下，“target”类确实存在于那些特定的元素上，因此你的标记是完全有效的。

这并不意味着在你使用CSS之前必须在HTML中声明类。请参考ruakh的评论。无论选择器是否有效完全取决于选择器语法，而CSS有自己的处理解析错误的规则，其中没有任何关于标记的内容。基本上，这意味着HTML和CSS在有效性方面是完全独立的。¹ 一旦你理解了这一点，就会清楚地知道在样式表中不定义.target规则没有任何副作用。²当你给元素分配类时，可以在样式表、脚本或两者中引用这些类。它们之间没有依赖关系，而是都参考标记（或更精确地说，它的DOM表示）。即使你使用JavaScript应用样式，就像在你的jQuery单行代码中所做的那样，这个原则也适用。

当你写一个带有类选择器的CSS规则时，你只是在说“我想要将样式应用到属于这个类的元素上”。同样地，当你编写一个脚本来通过某个类名检索元素时，你是在说“我想要对属于这个类的元素进行操作”。是否存在属于该类的元素是完全不同的问题。

---

¹ _{这也是为什么CSS ID 选择器匹配具有给定ID的所有元素，无论该ID是否只出现一次或多次（导致不符合HTML文档）。}

² _{我所知道唯一需要空CSS规则的情况是某些浏览器由于bug而拒绝正确应用某些其他规则; 创建一个空规则将导致这些其他规则由于某种原因被应用。参见此答案以了解此类错误的示例。但是这属于CSS方面，因此与标记无关。}

- BoltClock

---

我花了很长时间才意识到类与CSS无关。但几乎在同一时间，其他人也意识到这一点，然后微格式出现了。 - Konrad Rudolph

+1，尽管这个答案可能会被误解为CSS只能引用HTML中实际出现的类。实际上，一个网站经常会有适用于所有页面的站点级CSS，即使它所引用的一些类并不在每个页面上都出现。（例如，该网站可能对外部链接进行自定义样式设置 a.extlink 等，即使某些页面没有包含任何外部链接。） - ruakh

@ruakh：非常好的观点，谢谢。我在最初的简短回答中找不到合适的方式来涵盖这个问题，否则就会偏离主题，但我能看出使用“依赖性”这个词可能会给人留下这方面的印象，所以我稍加修改了一下。即便如此，我已经添加了一个脚注，引用了你的评论，并进一步展开了阐述。 - BoltClock

Answer 2

使用没有样式的类别不会产生任何不良影响。事实上，这也是CSS有用的一部分，因为它与标记分离，可以根据需要对元素/类别等进行样式或未样式化。

不要将它们视为“CSS类”，而应该将它们视为CSS在需要时也使用的“类别”。

- David

---

+1 表示“不要把它们看作'CSS类'，而是看作普通的'类'，如果需要，CSS也可以使用它们。” - laike9m

Answer 3

根据 HTML5规范：

类属性必须包含一组以空格分隔的标记，表示该元素所属的各个类别。 ... 在类属性中，作者可以使用任何标记，但鼓励作者使用描述内容性质的值，而不是描述内容预期呈现方式的值。

同时，在第4版中：

类属性在HTML中有几个作用：

• 作为样式表选择器（当作者希望将样式信息分配给一组元素时）。
• 供用户代理进行通用处理。

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

- Vitalii Fedorenko

---

+1 引用相关规格说明。我经常忘记这样做。请帮我翻译一下。 - BoltClock

Answer 4

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

CSS文件中引用的类不是类的定义，而是用作选择器规则以进行样式设置。

- Curtis

Answer 5

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

所需的仅是在HTML中包含类名。它不需要在CSS中。

实际上，许多人认为将用于CSS和JavaScript的类保持分离是一个好主意，因为它允许您的设计师和程序员独立工作，而不会通过使用彼此的类相互干扰。

（注意，上面的段落显然更适用于更大的项目，因此如果您正在自己工作，则无需采取这种极端措施；我提到了这一点是为了说明两者可以完全分开）

- Spudley

Answer 6

你可以不使用CSS类来添加类，但是如果你为JavaScript/jQuery代码添加CSS类，建议在类名前加上 js-YourClassName 前缀，这样前端开发人员永远不会使用这些类来为元素添加样式。他们应该明白这些类随时可以被删除。

- Aamir Afridi

Answer 7

一旦您在HTML中添加Class，该Class将被定义，因此您的解决方案完全正确

- koningdavid

---

在HTML中使用类并不能定义它。我认为更确切的说法是，定义并不重要：使用未定义的类不会受到任何惩罚。 - JAL

Answer 8

在你的样式表中定义CSS类并不是必需的。它应该可以正常工作。但添加它也不会有任何问题。

- Rameez

---

我并不是说要添加那些样式，如果他想支持那些样式，那就由他决定。无论如何，感谢你毫无必要地给我点了个踩 :) - Rameez

你说过“它...不会有害”，但最终它会有害。 - Pavlo

是的，这不会有任何影响。如果他有意添加这些空样式，那么显然也有能力管理它们。显然我不会添加，也不建议添加。 - Rameez

Answer 9

没有人完全提到的一件事是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声明：

.hidden {
    display: none;
}

您的HTML代码不会变，只是预定义的类仅供以后使用。

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

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

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

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

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

- James Donnelly

---

好建议。在我看来，使用.css()而不是切换类很少有好的理由。 - BoltClock

Answer 10

正如许多人所提到的那样，是的，使用未分配CSS的类是完全有效的。相比将它们视为“CSS类”，您应该简单地认识到类和ID的语义分别是组和单个元素。

我想补充一点，在给出的例子中还没有提到一个重要的点。如果您需要对可变长度的元素进行视觉操作（在本例中，您正在使用表行），则始终要认识到通过Javascript进行此类操作的成本可能非常高昂（例如，如果您有数千行）。

在这种情况下，假设我们知道第二列始终具有潜在的隐藏功能（这是您的表的有意功能），那么设计一个CSS样式来处理这种用例就是明智的。

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

与其使用JS遍历DOM找到N个元素，我们只需要在一个元素上（即我们的表格）切换一个类。

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

通过给表格分配一个ID，甚至可以更快地引用列，只需使用 :nth-child 选择器即可进一步减少标记，但我不能评论其效率。这样做的另一个原因是我讨厌内联样式，并且会想方设法消除它！

- Ian Clark

---

+1 对于“组和单个元素”的使用以及有效利用文档结构。 - deltab