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

I have a table where I show/hide a full column by jQuery via a CSS class that doesn't exist:

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

With this DOM I can do this in one line via jQuery: $('.target').css('display','none');

有了这个DOM，我可以通过jQuery实现这一行:$('.target').css('display'，'none');

This works perfectly, but is it valid to use CSS classes that aren't defined? Should I create an empty class for it?

这非常有效，但是使用没有定义的CSS类有效吗?我应该为它创建一个空类吗?

<style>.target{}</style>

Are there any side effects or is there a better way to do this?

有什么副作用吗?或者有更好的方法吗?

13 个解决方案

#1

"CSS class" is a misnomer; class is an attribute (or a property, in terms of scripting) that you assign to HTML elements. In other words, you declare classes in HTML, not CSS, so in your case the "target" class does in fact exist on those specific elements, and your markup is perfectly valid as it is.

“CSS类”是一个误用词;类是为HTML元素分配的属性(或属性)。换句话说，您用HTML而不是CSS声明类，因此在您的例子中，“目标”类实际上存在于这些特定的元素上，并且您的标记是完全有效的。

This doesn't necessarily mean that you need to have a class declared in the HTML before you can use it in CSS either. See ruakh's comment. Whether or not a selector is valid depends entirely on the selector syntax, and CSS has its own set of rules for handling parsing errors, none of which concern the markup at all. Essentially, this means HTML and CSS are completely independent of each other in the validity aspect.¹

这并不一定意味着您需要在HTML中声明一个类，然后才能在CSS中使用它。看到ruakh发表评论。选择器是否有效完全取决于选择器语法，而CSS有自己的一套处理解析错误的规则，这些规则根本不涉及标记。本质上，这意味着HTML和CSS在有效性方面是完全独立的

Once you understand that, it becomes clear that there is no side effect of not defining a .target rule in your stylesheet.² When you assign classes to your elements, you can reference those elements by those classes either in a stylesheet, or a script, or both. Neither has a dependency on the other. Instead, they both refer to the markup (or, more precisely, its DOM representation). This principle applies even if you're using JavaScript to apply styles, as you're doing in your jQuery one-liner.

一旦理解了这一点，很明显，在样式表中不定义.target规则没有副作用。当您将类分配给元素时，您可以在样式表或脚本中或两者中引用这些元素。两者都不依赖对方。相反，它们都引用标记(或者更准确地说是标记的DOM表示)。即使您使用JavaScript来应用样式，这一原则仍然适用，正如您在jQuery一行程序中所做的那样。

When you write a CSS rule with a class selector, all you're saying is "I want to apply styles to elements that belong to this class." Similarly, when you write a script to retrieve elements by a certain class name, you're saying "I want to do things with elements that belong to this class." Whether or not there are elements that belong to the class in question is a separate issue altogether.

当您使用类选择器编写CSS规则时，您所要做的就是“我想对属于这个类的元素应用样式”。类似地，当您编写一个脚本以通过某个类名检索元素时，您会说“我想对属于这个类的元素进行处理”。是否存在属于这个类的元素是一个单独的问题。

---

¹_{This is also why a CSS ID selector matches all elements with the given ID regardless of whether the ID appears exactly once, or multiple times (resulting in a non-conforming HTML document).}

这也是为什么CSS ID选择器与给定的ID匹配所有元素，而不管ID是否只出现一次，或多次(导致不符合HTML文档)。

²_{The only situation I'm aware of where an empty CSS rule like that is necessary is when some browsers refuse to apply certain other rules properly as the result of a bug; creating an empty rule will cause those other rules to be applied for some reason. See this answer for an example of such a bug. However this is on the CSS side and therefore should have nothing to do with the markup.}

我所知道的唯一一种情况是，当某些浏览器由于某个bug而拒绝适当地应用某些其他规则时，就必须使用这样的空CSS规则;创建一个空规则会因为某些原因而应用其他规则。请参阅此答案以获得此类错误的示例。然而，这是在CSS端，因此应该与标记无关。

#2

There are no ill effects to use classes which don't have styles. Indeed, that's part of the usefulness of CSS is that it's de-coupled from the markup and can style or not style elements/classes/etc. as needed.

使用没有样式的类没有副作用。的确，CSS的有用之处在于它是与标记解除耦合的，可以样式化元素/类/等等。根据需要。

Don't think of them as "CSS classes." Think of them as "classes" which CSS happens to also use if it needs to.

不要把它们看作“CSS类”。把它们看作是CSS碰巧在需要时使用的“类”。

#3

According to HTML5 specification:

根据HTML5规范:

A class attribute must have a value that is a set of space-separated tokens representing the various classes that the element belongs to. ... There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

一个类属性必须有一个值，该值是一组空间分隔的令牌，表示元素所属的各种类。对于作者可以在类属性中使用的令牌没有附加的限制，但是鼓励作者使用描述内容性质的值，而不是描述内容的理想表示的值。

Also, in the version 4:

此外，在第4版中:

The class attribute has several roles in HTML:

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

• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• 作为样式表选择器(当作者希望向一组元素分配样式信息时)。
• For general purpose processing by user agents.
• 用于用户代理的通用处理。

Your use case falls under the second scenario, which makes it a legitimate example of using a class attribute.

您的用例属于第二个场景，这使它成为使用类属性的合法示例。

#4

You can use a class which has no styles, this is entirely valid HTML.

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

A class referenced in a CSS file is not a definition of a class, it is used as a selector rule for styling purposes.

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

#5

When you use a classname in JavaScript, it does not look at the CSS to find that class. It looks directly in the HTML code.

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

All that is required is that the classname is in the HTML. It does not need to be in the CSS.

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

In fact, many people think it's actually a good idea to keep separate classes use with CSS and Javascript, as it allows your designers and coders to work independently without getting in each other's way by using each other's classes.

事实上，许多人认为把单独的类与CSS和Javascript分开是一个好主意，因为它允许您的设计人员和编程人员独立工作，而不使用彼此的类。

(note, the above paragraph is obviously more applicable for larger projects, so don't feel that you have to go to this extreme if you're working on your own; I mentioned it to make the point that the two can be entirely separate)

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

#6

You can use CSS classes without using it, but I suggest that if you are adding CSS classes just for the JavaScript/jQuery code, prefix with it js-YourClassName so the front-end developers never use these classes to style the elements. They should understand that these classes can be removed at any time.

您可以不使用CSS类而使用它，但是我建议，如果您只是为JavaScript/jQuery代码添加CSS类，那么在前面添加CSS类的时候，可以使用它的前缀js-YourClassName，这样前端开发人员就不会使用这些类来样式化元素。他们应该明白，这些类可以随时删除。

#7

The moment you add the Class in your HTML the Class will be defined, so your solution is completely fine

当您在HTML中添加类时，类将被定义，所以您的解决方案是完全正确的

#8

It's not necessary to define CSS classes in your stylesheet. It should work just fine. However, adding it won't harm.

不需要在样式表中定义CSS类。应该没问题。然而，加上它不会有什么害处。

#9

One thing that nobody here has fully mentioned is that JavaScript (aided by jQuery in this case) isn't able to directly modify a document's cascading style sheet. jQuery's css() method merely changes the matched set of elements' style property. CSS and JavaScript are completely unrelated in this aspect.

这里没有人完全提到的一点是JavaScript(在本例中借助jQuery)不能直接修改文档的级联样式表。jQuery的css()方法仅仅改变了元素样式属性的匹配集。CSS和JavaScript在这方面是完全不相关的。

$('.target').css('display','none'); doesn't change your .target { } CSS declaration at all. What has happened here instead is that any element with a class of "target" now looks something like this:

$(' .target '). css(“显示”,“没有一个”);完全不更改.target {} CSS声明。这里所发生的是，任何带有“target”类的元素现在看起来是这样的:

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

Are there any side effects caused by not pre-defining a CSS style rule? None whatsoever.

没有预先定义CSS样式规则会产生什么副作用吗?一点儿也没有呢。

Is there a better way to do this? Performance-wise, yes there is!

有更好的方法吗?属性,是的!

How can the performance be improved?

Rather than directly modifying the style of each element, instead you can pre-define a new class and add that to your matched elements using addClass() (another jQuery method).

与其直接修改每个元素的样式，不如预先定义一个新类，并使用addClass()(另一个jQuery方法)将其添加到匹配的元素中。

Based on this pre-existing JSPerf which compares css() with addClass(), we can see that addClass() is actually much faster:

基于将css()与addClass()进行比较的预先存在的JSPerf，我们可以看到，addClass()实际上要快得多:

How can we implement this ourselves?

Firstly we can add in our new CSS declaration:

首先，我们可以加入我们新的CSS声明:

.hidden {
    display: none;
}

Your HTML would remain the same, this pre-defined class is simply in place for later use.

您的HTML将保持不变，这个预定义的类只是用于以后的使用。

We can now modify the JavaScript to use addClass() instead:

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

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

When running this code, rather than directly modifying the style property of each of your matched "target" elements, this new class will now have been added:

运行此代码时，不再直接修改每个匹配的“目标”元素的样式属性，而是添加这个新类:

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

With the new "hidden" class, this element will inherit the styling declared in your CSS and your element will be set to no longer display.

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

#10

As is mentioned by so many others, yes, using classes with no assigned CSS is perfectly valid and rather than thinking of them as 'CSS classes' you should simply recognise the semantics of class and ID to be groups and individual elements respectively.

正如许多人提到的，是的，使用没有指定CSS的类是完全有效的，与其将它们视为“CSS类”，不如将类和ID的语义分别识别为组和单个元素。

I wanted to chip in as I felt an important point hasn't been raised given the example. If you ever need to do visual manipulations to a variable length of elements (in this case you're using table rows) then it always makes sense to recognise that the cost of doing so through Javascript could potentially be very expensive (e.g if you have thousands of rows).

我想插嘴，因为我觉得有一个重要的问题没有被提出，举个例子。如果您需要对变量长度的元素进行可视化操作(在本例中，您使用的是表行)，那么通过Javascript进行可视化操作的成本可能会非常昂贵(e)。如果你有成千上万行)。

In this situation let's say we know that column 2 always has the potential to be hidden (it's a conscious function of your table) then it makes sense to design a CSS style to handle this use case.

在这种情况下，假设我们知道第2列总是有隐藏的潜力(它是表的一个有意识的功能)，那么设计CSS样式来处理这个用例是有意义的。

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

Then rather than using JS to traverse through the DOM finding N elements we simply need to toggle a class on one (our table).

然后，与其使用JS遍历DOM寻找N个元素，不如在其中一个(我们的表)上切换类。

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

By assigning the table an ID this would be even quicker and you could even just refer to the column by using the :nth-child selector which would reduce your markup further but I can't comment on efficiency. Another reason for doing this is that I hate inline styling, and will go to great lengths to eradicate it!

通过给表分配ID，这将会更快，您甚至可以通过使用:nth-child selector来引用列，这将进一步减少您的标记，但我不能评论效率。这样做的另一个原因是我讨厌内联样式，并将不遗余力地根除它!

#11

It will have no effect if you apply a class on a HTML element, and that class is not defined in CSS. It is a common practice and like Aamir afridi said if you are using classes for js only purpose, it is a good practice to prefix them with js- .

如果您在HTML元素上应用一个类，并且这个类没有在CSS中定义，那么它将没有任何效果。这是一种常见的实践，就像Aamir afridi所说的，如果您只是为了js目的而使用类，那么最好使用js-作为前缀。

It is not only valid for calsses, but also for id attribute of html elements.

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

#12

There's no problem at all of using classes to just query for elements. I used to give such class names the sys- prefix (for example, I'll name your class sys-target) to distinguish them from classes used for styling. This was a convention used by some microsoft developers in the past. I also noticed a growing practice of using the js- prefix for this purpose.

使用类查询元素完全没有问题。我曾经给这类类类命名为sys-前缀(例如，我将命名您的类sys-target)，以区别于用于样式化的类。这是微软开发人员过去使用的惯例。我还注意到，为了达到这个目的，越来越多地使用js-前缀。

If you are not comfortable with using classes for purposes other than styling, I recommend using the Role.js jQuery plugin which allows you to achieve the same purpose using the role attribute, so, you may write your markup as <td role="target"> and query for it using $("@target"). The project page has good description and examples. I use this plugin for big projects because I really like keeping classes for styling purposes only.

如果您不喜欢将类用于除样式之外的目的，我建议您使用这个角色。js jQuery插件允许您使用role属性实现相同的目的，因此您可以将标记写成并使用$("@target")查询。项目页面有很好的描述和示例。我在大项目中使用这个插件，因为我真的喜欢为了样式化目的而保留类。

#13

Refer to the jQuery validation engine. Even in there we also use non-existent classes to add validation rules on the HTML attributes. So there is nothing wrong in using classes that are not actually declared in a stylesheet.

请参考jQuery验证引擎。即使在那里，我们也使用不存在的类在HTML属性上添加验证规则。因此，使用没有在样式表中声明的类是没有错的。