为什么CSS规则中仅使用class属性的部分值而非完整类名？

这是CSS多类名设计的标准用法，核心目的是实现样式复用与逻辑分层，具体原因如下： #

• 首先要明确CSS类选择器的匹配规则：HTML的class属性支持空格分隔的多个独立类名，类选择器.hand只会校验元素的类列表中是否包含hand这个独立类，不需要完全匹配整个class属性的完整字符串，所以三个指针元素只要带有hand类，都能命中这条规则。
• 减少代码冗余：三个指针存在大量通用样式，比如绝对定位、锚点对齐到表盘中心、基础形状设置等，把通用规则写在.hand下，不需要给.hour-hand/.min-hand/.second-hand各写一遍完全相同的样式。
• 提升可维护性：后续如果要调整所有指针的通用属性，只需要修改.hand这一处规则即可，不需要逐个修改三个指针的单独样式，避免漏改、错改。
• 样式逻辑分层清晰：公共属性放在公共类hand中，每个指针的差异化属性（比如时针更短更粗、秒针颜色为红色、不同指针的动画过渡速度不同）可以放在各自的独有类中单独定义，代码结构更易读。

/* 示例：分层样式写法 */
.hand {
  /* 所有指针通用样式 */
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
}
.hour-hand {
  /* 时针独有样式 */
  width: 6px;
  height: 30%;
  background: #333;
}
.second-hand {
  /* 秒针独有样式 */
  width: 2px;
  height: 45%;
  background: #f00;
}

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