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。可是避免使用它们做为样式的钩子。