1

在 CSS 中，我知道如果您定位一个唯一元素并使用类作为一组元素的一般定位，您可以使用 ID。我正在维护一个站点，我必须清理一些代码（html + css），我注意到以前的程序员没有为所有元素使用任何 ID，而是他使用类，即使是唯一元素。

所以，什么应该是一种可取的方法，我应该只使用类并遵循他的编码风格，避免对元素使用 ID，还是应该用 ID 替换它们并将 ID 用于适当的元素。

在 css 中，据我了解，类也可以像 ID 一样使用，您可以只针对单个元素（例如 .footer 与 #footer），这只是一个偏好问题。

#header { background: #ccc; height: 150px; }
#content { background: red; height: 200px; color: #fff;  }


<div id="header"><h1>Header Area</h1></div>
<div id="content"><h1>Content</h1></div>
<div id="header"><h1>Footer Area</h1></div>

注意#header在 id 中被提及两次，并且 css 规则适用于这两个元素。

ID 的行为类似于类 ( http://jsfiddle.net/79GsY/ )

.header { background: #ccc; height: 150px; }
.content { background: red; height: 200px; color: #fff;  }
.footer { background: brown; height: 150px; }


<div class="header"><h1>Header Area</h1></div>
<div class="content"><h1>Content</h1></div>
<div class="footer"><h1>Footer Area</h1></div>

请注意，这里没有使用 ID。

类的行为类似于 ID ( http://jsfiddle.net/qHEJd/ )

请赐教这个问题。谢谢你。

4

7 回答 7

5

这是语义问题。您使用 ID 来标识一个元素，例如区分页面上的多个表单，或者作为链接目标。它们对标记有意义。

对于类，你为事物设置了一个分类，你并没有真正赋予它们意义。这不像您将它们组合在一起或其他任何东西。

因此，如果页面上只有一个元素具有某个类，那就太好了。这并不意味着它“独一无二”。

于 2013-05-28T11:58:54.153 回答
3

一个ID必须是唯一的，一个类可以多次使用。

我个人使用 ID 来命名网站的不同部分。ID 总是描述事物是什么，而不是它的样子。对我来说常见的 ID 示例是#header、#footer、#post-comment 等。

另一方面，类用于对相似元素进行分类。然后 CSS 和 JS 都可以针对特定的类。类的示例是 .button、.icon 等。

就我个人而言，我根本不使用类，但更喜欢使用 SASS @mixins，因为它们使 HTML 与设计相关的类名保持干净。

于 2013-05-28T12:04:41.053 回答
1

在这种情况下，使用类名或 ID 几乎没有区别。有一种观点认为，在 CSS 中使用 ID 可以加快处理速度，但差异如此之小，可以忽略不计。

没有任何理由让您花时间修改以前的开发人员的标记，只要它是有效的（即：没有重复 ID）并且有效。修改类或 ID/等很可能会导致不希望的效果（特别是如果 JavaScript 绑定到那些相同的 DOM 元素）。

于 2013-05-28T11:58:04.060 回答
0

您应该始终牢记ID 应该是唯一的，如果您有唯一的元素，最好使用ID，如果不使用class

引用 w3c 页面-

ID 类型属性的特殊之处在于，在一个文档中没有两个这样的属性可以具有相同的值

于 2013-05-28T11:58:24.123 回答
0

唯一的区别是如果你使用class或者id是你是否使用了该元素的多个实例。比如说，你有一个页眉/内容和页脚，你知道你将只有这些的单例实例，所以我会使用一个id.

但是，如果您有两个标题，那么：

<div id="header></div>
<div id="header></div>

这不符合 HTML 标准，所以我会使用：

<div class="header></div>
<div class="header></div>

在基础中，如果它是该元素的单个实例，请使用id. 如果您知道您在一个元素上多次执行相同的操作，请使用class. 在某种程度上，这也是 CSS 的标准规则。

于 2013-05-28T11:57:06.453 回答
0

它对网站产生任何真正影响的几率几乎为零，所以这取决于你。这是一种风格偏好。

我认为您的问题主要是关于 CSS 样式对元素的应用，而不是脚本。当 CSS 被应用于元素以进行样式设置时，我相信无论您使用类选择器还是 ID 选择器来指定元素的样式，实际上都没有区别（除了特殊性的东西）。样式应用是通过获取元素并将其与规则匹配来完成的，而不是获取规则并找到匹配它们的元素，如果你明白我的意思的话。

但是，在脚本方面，为了完整性：如果您使用 jQuery 使用 CSS 选择器查找这些元素，在非常大的文档中查找单个元素时，ID 选择器可能比类选择器快一点。那是因为最终成为浏览器可以有效执行的调用，因为它知道只会有一个匹配项。相反，最终是对 的调用，即使在找到一个元素之后，它也必须继续搜索整个文档（当然，除非该搜索已经被选择器引擎缓存），以防有其他元素。$("#someId")document.getElementById$(".someClass")querySelectorAll

但同样：它对现实世界产生任何影响的可能性几乎为零。

还有一个非常小的要点：每个带有 的元素id都会在window对象上创建一个属性，并id以它的名称作为其名称（例如，在 上<div id="foo">创建一个foo属性window）。创建很多你不会使用的属性是一个小小的 ipsy 一点点不必要的工作。;-) 但是称这种过早优化是大大低估了它的过早程度（并且大大高估了它的优化量）。例如，这只是琐事。:-)

于 2013-05-28T11:59:30.410 回答
0

我更喜欢将 ID 用于 Unique 元素，将 Classes 用于元素组。因为，

当您为唯一元素使用 ID 时，DOM 将使用该 ID 搜索标签，并在找到该标签后立即停止搜索。另一方面，如果您为唯一元素选择类，它的工作方式与 IDS 相同，但 DOM 即使在找到该标签后也不会停止搜索。它将搜索整个页面以查找具有该类的任何其他标签。

对于元素组，我们不能使用 IDS，因此使用类是显而易见的选择。

希望这可以消除您的疑问。让我知道我是否遗漏了什么。

于 2013-05-28T12:00:31.050 回答