MaintainableCSS 《可维护性 CSS》 --- ID 篇

ID

从语法上讲，当只有一个实例时，我们应该使用一个ID。当有多个时，我们应该使用一个 class。

但是，ID 作用的优先级高于 class ，在我们想覆盖一个样式的时候，这就会导致问题。

为了演示，让我们把一个 ID 元素的颜色从红色替换成蓝色。

HTML 代码如下：

<div id="module" class="module-override">

CSS 代码:

#module {
    color: red;
}

.module-override {
    color: blue;
}

即使覆盖 module-override 声明中设为蓝色，元素也最终也红色的。把 ID 换成 class 后，就解决了这个问题。

<div class="module module-override">

.module {
    color: red;
}

.module-override {
    color: blue;
}

现在，问题解决了。

虽然使用 ID 进行样式定义是有问题的，但我们仍然可以在其他操作上使用。例如，使用 ID 做以下链接的时候：

label 指向输入字段;

URL 中的哈希片段指向到页面中的锚;

ARIA 属性帮助屏幕阅读器用户;

最后总结

只要您需要启用浏览器和辅助技术的特定行为时候，可以使用ID。但是避免使用它们作为样式的钩子。