如果我总是使用CSS类而不是CSS ID，那么有什么优点和缺点吗？

时间：2022-11-25 19:29:07

In CSS we can use both ID and class. is there any pros and cons if i use Class always instead ID in terms of Semantic, Web standards- W3C , SEO , Accessibility and future maintainability?

在CSS中，我们可以同时使用ID和类。如果我在语义，Web标准-W3C，SEO，可访问性和未来可维护性方面使用Class总是ID而有什么优缺点？

9 个解决方案

#1

37  

One big difference: in CSS, a class has a lower importance level than an ID.

一个很大的区别：在CSS中，类的重要性级别低于ID。

Imagine that each specification in a CSS declaration added a certain number of points to that declaration's value. Let's say the points go something like this (totally made up, but whatever):

想象一下，CSS声明中的每个规范都为该声明的值添加了一定数量的点。让我们说这些点是这样的（完全弥补，但无论如何）：

  • Tag name ('a', 'div', 'span'): 1 point
  • 标记名称（'a'，'div'，'span'）：1分
  • Class name ('.highlight', '.error', '.animal'): 10 points
  • 班级名称（'。highlight'，'。error'，'。animal'）：10分
  • ID ('#main-headline', '#nav', '#content'): 100 points
  • ID（'＃main-headline'，'＃nav'，'＃content'）：100分

So, the following declarations:

那么，以下声明：

a {
    color: #00f;
}

.highlight a {
    color: #0f0;
}

#nav .highlight a {
    color: #f00;
}

are worth 1, 11, and 111 points (respectively). For a given tag, the declaration with the highest number of points that matches it "wins". So for example, with those declarations, all a tags will be blue, unless they're inside an element with the "highlight" class, in which case they'll be green, unless that element is inside the element with id="nav", in which case they'll be red.

值分别为1,11和111分（分别）。对于给定标记，具有与其匹配的最高点数的声明“获胜”。因此，例如，对于那些声明，所有标记都是蓝色的，除非它们位于具有“highlight”类的元素内，在这种情况下它们将是绿色的，除非该元素位于具有id =“nav”的元素内“，在这种情况下，他们会变红。

Now, you can get yourself into tricky situations if you're only using classes. Let's say you want to make all the links in your content area blue, but all the links in your foo area red:

现在，如果你只使用课程，你可以让自己陷入棘手的境地。假设您想要将内容区域中的所有链接设置为蓝色，但是您的foo区域中的所有链接都是红色的：

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

By my previous (made up) scale, those both have 11 points. If you have a foo within your content, which one wins? In this situation, foo wins because it comes after. Now, maybe that's what you want, but that's just lucky. If you change your mind later, and want content to win, you have to change their order, and depending on the order of declarations in a CSS file is A Bad Idea. Now if, instead, you had the following declaration:

根据我之前的（弥补）规模，这些都有11分。如果你的内容中有foo，哪一个获胜？在这种情况下，foo会因为它而获胜。现在，也许这就是你想要的，但那很幸运。如果你以后改变主意，并希望内容获胜，你必须改变他们的顺序，并且根据CSS文件中的声明顺序是一个坏主意。现在，如果您有以下声明：

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

Content would always win, because that declaration has a value of 101 (beating foo's 11). No matter what order they come in, the content declaration will always beat the foo one. This provides you with some very important consistency. The winners won't arbitrarily change based on changing orders in the file, and if you want to change the the winner, you have to change the declarations (maybe add a #content in front of the .foo declaration, so it will have 111 points).

内容总是会赢，因为该声明的值为101（击败foo的11）。无论他们进入什么样的顺序，内容声明总是会击败foo。这为您提供了一些非常重要的一致性。获胜者不会根据文件中的更改顺序随意更改，如果您想更改获胜者，则必须更改声明（可能在.foo声明前添加#content，因此它将具有111点）。

So basically, the differences in values are important, and you get a lot of inconsistency and seemingly arbitrary winners if you just use classes.

所以基本上，值的差异很重要，如果你只是使用类，你会得到很多不一致和看似任意的赢家。

#2

4  

I know i'm not the 'norm' here and i'll get thumbed down for this... but i use class'es exclusively and only ever use ID's for scripting :)

我知道我不是这里的“常态”，我会因为这个而被大肆渲染......但我只使用class'es并且只使用ID来编写脚本:)

This creates a clear line of seperation of designer and coder related tweaks and changes, which is very handy for us!.

这为设计师和编码器相关的调整和变化创造了明确的分离线，这对我们来说非常方便！

Also we have some .NET web form coders (even though we are moving all sites to MVC) and as .NET controls take over ID's to script them dynamically using ID's for CSS is a pain... i'm not a fan of using #ct00_ct02_MyControlName in css files and even if i was changes to code can break the CSS! Classes works GREAT for this.

我们还有一些.NET Web表单编码器（即使我们将所有站点都移动到MVC）并且.NET控件接管ID以使用ID为CSS动态编写脚本是一种痛苦......我不喜欢使用css文件中的＃ct00_ct02_MyControlName，即使我对代码进行了更改也可以打破CSS！课程适用于此。

Some PHP libs others in the company are using also need to use dynamic ID assignment, this creates the problem here too. again Classes work GREAT here.

公司中的一些其他PHP库也需要使用动态ID分配，这也会产生问题。再次上课在这里工作很棒。

As more and more of these dynamic outputs and languages use up the ID's (for exactly what they are really intended for... identifiing an element to work with it) it can be more and more of a pain to work with IDs in CSS.

随着越来越多的这些动态输出和语言消耗了ID（正是它们真正用于识别要使用它的元素），在CSS中使用ID会越来越痛苦。

It's seems to me that everyone wants to use them simply cause they think they should, becuase they are 'there', i offer the idea that ID's are not there at all for CSS and their use in CSS is just there as an extra helper via the selector and their real use is scripting.

在我看来，每个人都想要使用它们只是因为他们认为应该使用它们，因为它们是“那里”，我提出的想法是ID根本不存在于CSS中，并且它们在CSS中的使用只是作为额外的帮助者通过选择器和它们的实际用途是脚本。

There has not been a single instance where i needed an ID for css use or even a single instance where it would have been eaiser.

没有一个实例我需要一个用于css的ID，或者甚至是一个单独的实例，它本来就是eaiser。

But perhaps i'm just used to it and thats why? My HTML output is small, my CSS files small and direct. Nested elements work in all browsers as i expect, i dont have issues and can create complicated nicely rendered pages. Changes take mere minutes as i can apply multiple classes to an element or make a new one.

但也许我只是习惯了它，那就是为什么？我的HTML输出很小，我的CSS文件小而直接。嵌套元素在我所期望的所有浏览器中都可以工作，我没有问题并且可以创建复杂的精美渲染页面。更改只需几分钟，因为我可以将多个类应用于元素或创建一个新元素。

ID's for scripting, CLASS for css... works a treat.

用于编写脚本的ID，用于CSS的CLASS ...是一种享受。

Obivously there is no major issue (Even in a team of designers and coders) in using them both for css as we all get used to what we get used to :) but the way we work it outputs the expected results fast, and noone can step on anyones toes even in anonomous sharing enviroments.

显而易见的是，即使在设计师和编码人员团队中也没有重大问题，因为我们都习惯了我们习惯的东西:)但我们的工作方式很快就输出了预期的结果，没有人可以即使在自治共享环境中，也要踩到任何人的脚趾。

#3

2  

My biggest one would be from the future maintenance point of view. Not only is it nice to know that a style is only used for one element on a page, but if you ever start integrated javascript into your page its nice to be able to access elements quickly using their IDs rather than try and access them by their class's.

我最大的一个就是从未来的维护角度来看。知道一个样式只用于页面上的一个元素不仅很好，但是如果你开始将javascript集成到你的页面中，那么很高兴能够使用他们的ID快速访问元素，而不是试图通过他们的访问来访问它们。类的。

#4

1  

If you're using a decent javascript library (like prototype or jQuery) then no, I can't think of any technical reasons why this would matter. However, it might help your own internal thinking and consistency to think separately about whether it is an attribute-like collective characteristic (=> class) or a specific item (=> ID).

如果你正在使用一个像样的javascript库（如原型或jQuery）那么不，我想不出任何技术原因，为什么这很重要。但是，它可能有助于您自己的内部思考和一致性，分别思考它是一个类似属性的集体特征（=>类）还是一个特定的项目（=> ID）。

#5

1  

Use id when an element is unique on a page and you always expect it to be. Use class when multiple elements will be assigned the value of the attribute. It's true that it may not make a big difference from a purely CSS perspective, but from the JavaScript or Selenium perspective, it's a big deal to be able to uniquely identify elements by their id attribute.

当元素在页面上是唯一的并且您始终期望它时，请使用id。在为多个元素分配属性值时使用class。确实，它可能与纯粹的CSS视角没有太大区别，但从JavaScript或Selenium的角度来看，能够通过id属性唯一地标识元素是一件大事。

#6

1  

See following:
CSS Best Practice about ID and Class?

请参阅以下内容：CSS关于ID和类的最佳实践？

For SEO: It will make absolutely no difference to seo at all.

对于SEO：它对seo完全没有任何区别。

You should choose names that reflect the semantic content of that section. eg: id="leftMenu" class="footerNotes"

您应该选择反映该部分语义内容的名称。例如：id =“leftMenu”class =“footerNotes”

Don't use any underscores in your class and id names (common mistake).

不要在你的班级和id名称中使用任何下划线（常见错误）。

#7

1  

In simple we can define id and class as below

简单来说，我们可以定义id和class，如下所示

ID = A person's Identification (ID) is unique to one person. 
Class = There are many people in a class.
Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.There is no hard rule on when to use ID and when to use Class. My suggestion is to use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript's getElementByID function, in which case you need use ID.

#8

1  

IDs are good for elements that need to be accessed from JavaScript. But the IDs must be unique in the page according to w3 standards, that is:

ID适用于需要从JavaScript访问的元素。但根据w3标准，页面中的ID必须是唯一的，即：

  • you cannot have two <div id="Header"> in one document
  • 你不能在一个文件中有两个
  • you cannot have a <div id="Header"> and <p id="Header"> in one document
  • 你不能在一个文件中有一个
    和

Class names are good for elements that do not need to be accessed from JavaScript (although it is possible to do so). One class name can be used for multiple elements, and one element can have more than one class names attached to it. Class names therefore allow you to create more "generic" css definitions, for example:

类名称适用于不需要从JavaScript访问的元素（尽管可以这样做）。一个类名可以用于多个元素，一个元素可以附加多个类名。因此，类名允许您创建更多“通用”css定义，例如：

  • <div class="column">
  • <div class="column left-column">
  • <div class="column right-column"> -- all three can be in the same document
  • - 这三个都可以在同一个文档中

You can mix IDs and classes together.

您可以将ID和类混合在一起。

To summarize: use IDs for specific cases; class names for generic cases; and cascad classes for elements that share some general properties but not all.

总结一下：对特定情况使用ID;一般情况的类名;和cascad类，用于共享某些常规属性但不是全部属性的元素。

#9

0  

The only difference between classes and ids, except for the fact that an id MUST be unique and a class does not, is that the browser can use an element's id for navigational purposes. For example, this page has a logo with id="hlogo". If you append to this page's url the hash #hlogo, like this https://*.com/questions/1878810/is-there-any-pros-and-cons-if-i-use-always-css-class-instead-css-id-for-everythi#hlogo, the browser will automatically scroll to the logo.

类和id之间的唯一区别是，除了id必须是唯一而类没有的事实之外，浏览器可以使用元素的id进行导航。例如，此页面的标识为id =“hlogo”。如果你追加到这个网页的网址#hlogo，就像这样https://*.com/questions/1878810/is-there-any-pros-and-cons-if-i-use-always-css-class-而是-css-id-for-everythi #hlogo，浏览器将自动滚动到徽标。

#1

37  

One big difference: in CSS, a class has a lower importance level than an ID.

一个很大的区别：在CSS中，类的重要性级别低于ID。

Imagine that each specification in a CSS declaration added a certain number of points to that declaration's value. Let's say the points go something like this (totally made up, but whatever):

想象一下，CSS声明中的每个规范都为该声明的值添加了一定数量的点。让我们说这些点是这样的（完全弥补，但无论如何）：

  • Tag name ('a', 'div', 'span'): 1 point
  • 标记名称（'a'，'div'，'span'）：1分
  • Class name ('.highlight', '.error', '.animal'): 10 points
  • 班级名称（'。highlight'，'。error'，'。animal'）：10分
  • ID ('#main-headline', '#nav', '#content'): 100 points
  • ID（'＃main-headline'，'＃nav'，'＃content'）：100分

So, the following declarations:

那么，以下声明：

a {
    color: #00f;
}

.highlight a {
    color: #0f0;
}

#nav .highlight a {
    color: #f00;
}

are worth 1, 11, and 111 points (respectively). For a given tag, the declaration with the highest number of points that matches it "wins". So for example, with those declarations, all a tags will be blue, unless they're inside an element with the "highlight" class, in which case they'll be green, unless that element is inside the element with id="nav", in which case they'll be red.

值分别为1,11和111分（分别）。对于给定标记，具有与其匹配的最高点数的声明“获胜”。因此，例如，对于那些声明，所有标记都是蓝色的，除非它们位于具有“highlight”类的元素内，在这种情况下它们将是绿色的，除非该元素位于具有id =“nav”的元素内“，在这种情况下，他们会变红。

Now, you can get yourself into tricky situations if you're only using classes. Let's say you want to make all the links in your content area blue, but all the links in your foo area red:

现在，如果你只使用课程，你可以让自己陷入棘手的境地。假设您想要将内容区域中的所有链接设置为蓝色，但是您的foo区域中的所有链接都是红色的：

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

By my previous (made up) scale, those both have 11 points. If you have a foo within your content, which one wins? In this situation, foo wins because it comes after. Now, maybe that's what you want, but that's just lucky. If you change your mind later, and want content to win, you have to change their order, and depending on the order of declarations in a CSS file is A Bad Idea. Now if, instead, you had the following declaration:

根据我之前的（弥补）规模，这些都有11分。如果你的内容中有foo，哪一个获胜？在这种情况下，foo会因为它而获胜。现在，也许这就是你想要的，但那很幸运。如果你以后改变主意，并希望内容获胜，你必须改变他们的顺序，并且根据CSS文件中的声明顺序是一个坏主意。现在，如果您有以下声明：

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

Content would always win, because that declaration has a value of 101 (beating foo's 11). No matter what order they come in, the content declaration will always beat the foo one. This provides you with some very important consistency. The winners won't arbitrarily change based on changing orders in the file, and if you want to change the the winner, you have to change the declarations (maybe add a #content in front of the .foo declaration, so it will have 111 points).

内容总是会赢，因为该声明的值为101（击败foo的11）。无论他们进入什么样的顺序，内容声明总是会击败foo。这为您提供了一些非常重要的一致性。获胜者不会根据文件中的更改顺序随意更改，如果您想更改获胜者，则必须更改声明（可能在.foo声明前添加#content，因此它将具有111点）。

So basically, the differences in values are important, and you get a lot of inconsistency and seemingly arbitrary winners if you just use classes.

所以基本上，值的差异很重要，如果你只是使用类，你会得到很多不一致和看似任意的赢家。

#2

4  

I know i'm not the 'norm' here and i'll get thumbed down for this... but i use class'es exclusively and only ever use ID's for scripting :)

我知道我不是这里的“常态”，我会因为这个而被大肆渲染......但我只使用class'es并且只使用ID来编写脚本:)

This creates a clear line of seperation of designer and coder related tweaks and changes, which is very handy for us!.

这为设计师和编码器相关的调整和变化创造了明确的分离线，这对我们来说非常方便！

Also we have some .NET web form coders (even though we are moving all sites to MVC) and as .NET controls take over ID's to script them dynamically using ID's for CSS is a pain... i'm not a fan of using #ct00_ct02_MyControlName in css files and even if i was changes to code can break the CSS! Classes works GREAT for this.

我们还有一些.NET Web表单编码器（即使我们将所有站点都移动到MVC）并且.NET控件接管ID以使用ID为CSS动态编写脚本是一种痛苦......我不喜欢使用css文件中的＃ct00_ct02_MyControlName，即使我对代码进行了更改也可以打破CSS！课程适用于此。

Some PHP libs others in the company are using also need to use dynamic ID assignment, this creates the problem here too. again Classes work GREAT here.

公司中的一些其他PHP库也需要使用动态ID分配，这也会产生问题。再次上课在这里工作很棒。

As more and more of these dynamic outputs and languages use up the ID's (for exactly what they are really intended for... identifiing an element to work with it) it can be more and more of a pain to work with IDs in CSS.

随着越来越多的这些动态输出和语言消耗了ID（正是它们真正用于识别要使用它的元素），在CSS中使用ID会越来越痛苦。

It's seems to me that everyone wants to use them simply cause they think they should, becuase they are 'there', i offer the idea that ID's are not there at all for CSS and their use in CSS is just there as an extra helper via the selector and their real use is scripting.

在我看来，每个人都想要使用它们只是因为他们认为应该使用它们，因为它们是“那里”，我提出的想法是ID根本不存在于CSS中，并且它们在CSS中的使用只是作为额外的帮助者通过选择器和它们的实际用途是脚本。

There has not been a single instance where i needed an ID for css use or even a single instance where it would have been eaiser.

没有一个实例我需要一个用于css的ID，或者甚至是一个单独的实例，它本来就是eaiser。

But perhaps i'm just used to it and thats why? My HTML output is small, my CSS files small and direct. Nested elements work in all browsers as i expect, i dont have issues and can create complicated nicely rendered pages. Changes take mere minutes as i can apply multiple classes to an element or make a new one.

但也许我只是习惯了它，那就是为什么？我的HTML输出很小，我的CSS文件小而直接。嵌套元素在我所期望的所有浏览器中都可以工作，我没有问题并且可以创建复杂的精美渲染页面。更改只需几分钟，因为我可以将多个类应用于元素或创建一个新元素。

ID's for scripting, CLASS for css... works a treat.

用于编写脚本的ID，用于CSS的CLASS ...是一种享受。

Obivously there is no major issue (Even in a team of designers and coders) in using them both for css as we all get used to what we get used to :) but the way we work it outputs the expected results fast, and noone can step on anyones toes even in anonomous sharing enviroments.

显而易见的是，即使在设计师和编码人员团队中也没有重大问题，因为我们都习惯了我们习惯的东西:)但我们的工作方式很快就输出了预期的结果，没有人可以即使在自治共享环境中，也要踩到任何人的脚趾。

#3

2  

My biggest one would be from the future maintenance point of view. Not only is it nice to know that a style is only used for one element on a page, but if you ever start integrated javascript into your page its nice to be able to access elements quickly using their IDs rather than try and access them by their class's.

我最大的一个就是从未来的维护角度来看。知道一个样式只用于页面上的一个元素不仅很好，但是如果你开始将javascript集成到你的页面中，那么很高兴能够使用他们的ID快速访问元素，而不是试图通过他们的访问来访问它们。类的。

#4

1  

If you're using a decent javascript library (like prototype or jQuery) then no, I can't think of any technical reasons why this would matter. However, it might help your own internal thinking and consistency to think separately about whether it is an attribute-like collective characteristic (=> class) or a specific item (=> ID).

如果你正在使用一个像样的javascript库（如原型或jQuery）那么不，我想不出任何技术原因，为什么这很重要。但是，它可能有助于您自己的内部思考和一致性，分别思考它是一个类似属性的集体特征（=>类）还是一个特定的项目（=> ID）。

#5

1  

Use id when an element is unique on a page and you always expect it to be. Use class when multiple elements will be assigned the value of the attribute. It's true that it may not make a big difference from a purely CSS perspective, but from the JavaScript or Selenium perspective, it's a big deal to be able to uniquely identify elements by their id attribute.

当元素在页面上是唯一的并且您始终期望它时，请使用id。在为多个元素分配属性值时使用class。确实，它可能与纯粹的CSS视角没有太大区别，但从JavaScript或Selenium的角度来看，能够通过id属性唯一地标识元素是一件大事。

#6

1  

See following:
CSS Best Practice about ID and Class?

请参阅以下内容：CSS关于ID和类的最佳实践？

For SEO: It will make absolutely no difference to seo at all.

对于SEO：它对seo完全没有任何区别。

You should choose names that reflect the semantic content of that section. eg: id="leftMenu" class="footerNotes"

您应该选择反映该部分语义内容的名称。例如：id =“leftMenu”class =“footerNotes”

Don't use any underscores in your class and id names (common mistake).

不要在你的班级和id名称中使用任何下划线（常见错误）。

#7

1  

In simple we can define id and class as below

简单来说，我们可以定义id和class，如下所示

ID = A person's Identification (ID) is unique to one person. 
Class = There are many people in a class.
Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.There is no hard rule on when to use ID and when to use Class. My suggestion is to use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript's getElementByID function, in which case you need use ID.

#8

1  

IDs are good for elements that need to be accessed from JavaScript. But the IDs must be unique in the page according to w3 standards, that is:

ID适用于需要从JavaScript访问的元素。但根据w3标准，页面中的ID必须是唯一的，即：

  • you cannot have two <div id="Header"> in one document
  • 你不能在一个文件中有两个
  • you cannot have a <div id="Header"> and <p id="Header"> in one document
  • 你不能在一个文件中有一个
    和

Class names are good for elements that do not need to be accessed from JavaScript (although it is possible to do so). One class name can be used for multiple elements, and one element can have more than one class names attached to it. Class names therefore allow you to create more "generic" css definitions, for example:

类名称适用于不需要从JavaScript访问的元素（尽管可以这样做）。一个类名可以用于多个元素，一个元素可以附加多个类名。因此，类名允许您创建更多“通用”css定义，例如：

  • <div class="column">
  • <div class="column left-column">
  • <div class="column right-column"> -- all three can be in the same document
  • - 这三个都可以在同一个文档中

You can mix IDs and classes together.

您可以将ID和类混合在一起。

To summarize: use IDs for specific cases; class names for generic cases; and cascad classes for elements that share some general properties but not all.

总结一下：对特定情况使用ID;一般情况的类名;和cascad类，用于共享某些常规属性但不是全部属性的元素。

#9

0  

The only difference between classes and ids, except for the fact that an id MUST be unique and a class does not, is that the browser can use an element's id for navigational purposes. For example, this page has a logo with id="hlogo". If you append to this page's url the hash #hlogo, like this https://*.com/questions/1878810/is-there-any-pros-and-cons-if-i-use-always-css-class-instead-css-id-for-everythi#hlogo, the browser will automatically scroll to the logo.

类和id之间的唯一区别是，除了id必须是唯一而类没有的事实之外，浏览器可以使用元素的id进行导航。例如，此页面的标识为id =“hlogo”。如果你追加到这个网页的网址#hlogo，就像这样https://*.com/questions/1878810/is-there-any-pros-and-cons-if-i-use-always-css-class-而是-css-id-for-everythi #hlogo，浏览器将自动滚动到徽标。

标签：

相关文章