css - 在 CSS 中将 ID 用于“模块”是否被认为是不好的做法？

Question

我知道很多人反对在你的样式中使用 ID，因为它们增加了太多的特异性。

但是，如果您正在使用可以放置在任何页面或任何容器上的组件，如果小心使用，这不是一件好事吗？我忽略了什么吗？

我做的最后一个项目是使用 SMACSS 方法来模块化所有内容。这工作得很好，除非在某些情况下我必须故意添加额外的特异性。

使用 SCSS 的示例：

#myWidget {
  .foo { 
    width: 150px;
  }
  ...
}

在某些情况下，这可以被公平地覆盖

.myWidget {
  .foo {
    width: 150px;
  }
}

score 1 · Accepted Answer

一般规则是，一个 ID 应该只出现在页面上一次（例如#main-navigation，对于<div>包含您网站的导航的），并且类可以在页面上出现多次（.red-text例如，给某些文本一个红色）。我个人倾向于使用 ID 来分隔不同的容器级别部分，而类可以更广泛地应用。

但是，您的示例不包含有效的 CSS……您需要像这样编写它们：

#myWidget .foo { 
    width: 150px;
}

或者

.myWidget .foo { 
    width: 150px;
}

1 回答 1