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

html CSS

Gil伽罗小宇宙

2020-03-24

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

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

第3323篇《我可以使用不存在的CSS类吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共12个回答

飞云 2020.03.24

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

猴子村村 2020.03.24

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

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

蛋蛋猿 2020.03.24

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

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

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

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

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

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

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

樱 2020.03.24

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

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

猴子村村 2020.03.24

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

神无 2020.03.24

当您在HTML中添加Class时，将定义Class，因此您的解决方案就可以了

null 2020.03.24

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

猴子村村 2020.03.24

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

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

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

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

Tony凯 2020.03.24

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

不要将它们视为“ CSS类”。可以将它们视为CSS必要时也使用的“类”。

ItachiStafan 2020.03.24

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

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

梅 2020.03.24

根据HTML5规范：

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

另外，在版本4中：

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

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

用于用户代理的通用处理。

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

Harry伽罗 2020.03.24

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

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

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

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

¹ _{这也是CSS ID选择器将所有具有给定ID的元素匹配的原因，而无论ID是显示一次还是多次（导致不合格的HTML文档）。}

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