关于 ID 和类的 CSS 最佳实践？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/298607/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Best Practice about ID and Class?
提问by Mesh
I've been dipping into SitePoint book concerning CSS.
我一直在研究有关 CSS 的 SitePoint 书籍。
The thing that struck me about the examples was the use of ID as a CSS selector.
这些示例让我印象深刻的是使用 ID 作为 CSS 选择器。
Some bits of CSS design I've done, I've always found it easier and more versatile to use Class as the selector.
我已经完成了一些 CSS 设计，我总是发现使用 Class 作为选择器更容易和更通用。
Maybe its a .Net thing as we don't always have control of the ID of an element...
也许它是 .Net 的东西，因为我们并不总是可以控制元素的 ID...
Is the best practice here to use CLASS or ID as the selector?
此处使用 CLASS 或 ID 作为选择器的最佳做法是什么？
回答by nickf
I guess they always use the id in examples because it's less ambiguous. You know that they're talking specifically about thatone element and its styles.
我猜他们总是在示例中使用 id ，因为它不那么模棱两可。你知道他们专门谈论那个元素及其样式。
In general, the rule of thumb is that you should ask yourself: "is there more than one element which requires the same style, now or at any time in the future?", and the answer is even "maybe", then make it a class.
一般来说，经验法则是你应该问自己：“现在或将来的任何时候，是否有不止一个元素需要相同的风格？”，答案甚至是“可能”，然后制作它一类。
回答by Ola Tuvesson
Don't forget that classand IDare not mutually exclusive. There is nothing to stop you from having both! This is sometimes very useful as it allows an item to inherit common styling along with other elements of the same class as well as giving you precise control of that specific item. Another handy technique is to apply multiple classes to the same object (yes, class="someClass someOtherClass"is perfectly valid) For example:
不要忘记class和ID不是相互排斥的。没有什么可以阻止您同时拥有两者！这有时非常有用，因为它允许项目与同一类的其他元素一起继承通用样式，并让您精确控制该特定项目。另一种方便的技术是将多个类应用于同一个对象（是的，class="someClass someOtherClass"完全有效）例如：
<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}
div.wide {
width: 40em;
}
div.narrow {
width: 10em;
}
div#oddOneOut {
float: right;
}
</style>
<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>
In theory it is also possible to get CSS to only apply to items that belong to several classes, e.g. div.box.narrow {something: somevalue;}but unfortunately this is not supported in all browsers. Update 2011:Multiple class selectors now have near universal browser support so go ahead and use them!
理论上，也可以让 CSS 仅应用于属于多个类的项目，例如，div.box.narrow {something: somevalue;}但不幸的是，并非所有浏览器都支持这种方式。2011 年更新：多个类选择器现在几乎支持通用浏览器，所以请继续使用它们！
回答by alexmeia
Don't forget that you can link to an element that has an ID. This can be very important for accessibility, among the other benefits. This is a good reason why for layout elements like header, navigation, main content, footer, search form and so on, you should always use an ID instead of a Class (or together with a Class).
不要忘记您可以链接到具有 ID 的元素。这对于可访问性以及其他好处非常重要。这就是为什么对于页眉、导航、主要内容、页脚、搜索表单等布局元素，您应该始终使用 ID 而不是类（或与类一起）的一个很好的理由。
回答by Zak Linder
Another useful resource is the W3C spec on Cascading Order: idselectors are given ten timesthe weight of classselectors. This is especially important if you plan to override styles depending on different scenarios or state changes. The more specific the initial selector, the more work you have to do to override it in additional declarations.
另一个有用的资源是关于 Cascading Order的W3C 规范：id选择器的权重是选择器的十倍class。如果您计划根据不同的场景或状态更改覆盖样式，这一点尤其重要。初始选择器越具体，在附加声明中覆盖它所需的工作就越多。
回答by paxdiablo
The practice depends on the 'resolution' of what you're trying to select.
实践取决于您尝试选择的“分辨率”。
I use classes when I want to change a whole swag of elements. IDs give me a much more fine-grained control which is sometimes necessary.
当我想更改整个元素时，我会使用类。ID 给了我一个更细粒度的控制，这有时是必要的。
回答by annakata
ID selectors have a high specificity, which is often what you need in CSS. The tighter you can get the CSS to apply to exactly what it needs to the less work the CSS renderer has to do in establishing rules.
ID 选择器具有很高的特异性，这通常是您在 CSS 中所需要的。您可以将 CSS 应用得越严格，CSS 渲染器在建立规则时必须做的工作就越少。
Design to task, and do so in an OO manner - use classes where the objects areclasslike, IDs where you mean to target instances, and treat tag refs as something like interfaces (and beware when you do so!). That's the best practice I can think of.
设计任务，并在面向对象的方式做到这一点-利用类型，其中的对象是classlike，在这里你的意思是目标实例的ID，并且像对待接口裁判标签（当你这样做要小心！）。这是我能想到的最佳实践。
edit: and yeah MS really shafted CSS with ASP.NET thanks guys!
编辑：是的，MS 真的用 ASP.NET 处理了 CSS，谢谢大家！
回答by Timothy Khouri
You should use an "id" when you're always talking about a single (and will always be single) seciton of your site.
当您总是谈论站点的单个（并且将始终是单个）部分时，您应该使用“id”。
Basically, it comes down to semantics.
基本上，它归结为语义。
div.header
That's tells me that you allow multiple "headers" in your site. Perhaps these are sub headers.
这告诉我您允许在您的站点中使用多个“标题”。也许这些是子标题。
div#header
That tells me that you're talking about the single "header section" of your site layout.
这告诉我您正在谈论站点布局的单个“标题部分”。
EDIT: Here's a semi-old article about a Pure CSS design... if you just scan the CSS examples, you'll see why I use ID's in there: How To: Pure CSS Design
编辑：这是一篇关于纯 CSS 设计的半旧文章......如果你只浏览 CSS 示例，你就会明白我为什么在那里使用 ID：如何：纯 CSS 设计
回答by Sam Murray-Sutton
IDs are for uniquely identifying elements, Classes are for identifying an element as being part of a class of elements.
ID 用于唯一标识元素，类用于将元素标识为元素类的一部分。
In practical terms, id attributes should only be used one per document, class attributes can be used on more than one element on a document.
实际上，每个文档只能使用一个 id 属性，可以在文档中的多个元素上使用 class 属性。
Check the W3C specand also the CSS-Discusspage on this issue.
检查W3C 规范以及有关此问题的CSS-Discuss页面。
回答by Alexandre
I prefer to use Class as the selector, so I can use it with more than one element at the same page. Using the id as the selector, does not allow this, since the id must be unique.
我更喜欢使用 Class 作为选择器，因此我可以在同一页面上将它与多个元素一起使用。使用 id 作为选择器是不允许的，因为 id 必须是唯一的。
回答by Joy
Please refer to:
请参阅：
Don't use ID selectors in CSS: http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/
不要在 CSS 中使用 ID 选择器：http: //screwlewse.com/2010/07/dont-use-id-selectors-in-css/
Don't use IDs in CSS selectors?: http://oli.jp/2011/ids/
不要在 CSS 选择器中使用 ID？：http: //oli.jp/2011/ids/
