如果我总是使用CSS Class代替CSS ID，那么有什么优点和缺点吗？

问题描述 投票：27回答：9

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

css css-selectors
9个回答
39
投票

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

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

  • 标记名称（'a'，'div'，'span'）：1分
  • 班级名称（'。highlight'，'。error'，'。animal'）：10分
  • ID（'＃main-headline'，'＃nav'，'＃content'）：100分

那么，以下声明：

a {
    color: #00f;
}

.highlight a {
    color: #0f0;
}

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

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

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

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

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

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

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

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

3
投票

我知道我不是这里的“常态”，我会因为这个而感到沮丧...但我只使用类，只使用ID来编写脚本:)

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

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

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

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

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

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

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

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

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

1
投票

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

1
投票

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

1
投票

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

1
投票

见如下： CSS Best Practice about ID and Class?

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

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

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

1
投票

简单来说，我们可以定义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.
1
投票

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

  • 你不能在一个文件中有两个<div id="Header">
  • 你不能在一个文件中有<div id="Header">和<p id="Header">

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

  • <div class="column">
  • <div class="column left-column">
  • <div class="column right-column"> - 这三个都可以在同一份文件中

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

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

0
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.