CSS类与ID最佳实践咨询：复用组件用ID微调样式是否合理

用class定义可复用组件的基础样式，再通过ID做差异化微调不算前端开发的最佳实践，原因和替代方案如下：

为什么不推荐用ID做样式微调 #

1. 优先级过高，维护成本高：ID选择器的优先级远高于class（ID权重为100，class为10），后续若要修改这些ID对应的样式，要么用更复杂的选择器（比如.block#block_articles），要么加!important，都会让CSS变得混乱难维护。
2. 违背组件复用原则：ID是页面唯一标识，无法复用，如果后续需要新增同类型的深色区块，没法直接复用#block_webpages的样式，只能重复写代码。
3. 混淆ID的职责：ID更适合给JS提供唯一的DOM操作入口，用来写样式会让它的职责变得模糊。

更优的替代方案：用扩展class做差异化 #

针对你示例里的场景，完全可以给基础组件添加修饰符class来实现样式微调，既保留复用性，又能灵活做差异化：

改进后的CSS代码 #

/* 基础组件样式 */
.block {
  background-color: var(--darkest-green);
  border: 1px solid black;
  margin: 10px 0px;
}

/* 修饰符class，用于差异化样式 */
.block--light-green {
  background-color: var(--light-green);
}

.block--green {
  background-color: var(--green);
}

改进后的HTML代码 #

<div class="block">Introduction of the different web pages</div>
<div class="block block--light-green">About the website's author</div>
<div class="block block--green">Shows the latest published article</div>

额外建议 #

• 可以参考BEM命名规范（块-元素-修饰符）来给class命名，让代码语义更清晰，团队协作时更易理解
• 尽量把ID的使用限制在JS操作DOM的场景，不要用它来写样式
• 当需要少量动态样式调整时，也可以直接在HTML里通过style属性传递CSS变量（比如<div class="block" style="background-color: var(--light-green)"></div>）

内容的提问来源于stack exchange，提问作者highxsky