CSS中的utility类是什么？CSS新手如何更好地组织CSS代码？

utility类（国内也常叫工具类、通用类）是职责单一、可全局复用的细粒度CSS类，核心设计逻辑是把常用的样式规则拆成最小的独立单元，你可以直接在HTML元素上组合多个工具类快速实现样式效果，不需要为每个元素单独编写自定义CSS规则。

你提供的代码示例里，前三个类就是典型的utility类：

.shadow {
  box-shadow: 0 0 10px red;
}

.padding {
  padding: 10px;
}

.radius {
  border-radius: 10px;
}

• .shadow 仅负责添加固定参数的阴影效果
• .padding 仅负责添加固定数值的内边距
• .radius 仅负责添加固定数值的圆角

最后一个.card不属于utility类，它是典型的组件类：同时定义了背景色、边框两个和卡片功能强绑定的样式，职责不单一，只能应用在卡片类元素上，不能通用到其他场景。

对于刚接触CSS代码组织的新手来说，用utility类的优势很明显：

• 减少重复代码：相同的样式规则不用在多个类里反复编写，全局复用同一个工具类即可
• 降低命名压力：不需要为每个小的页面元素绞尽脑汁想自定义类名，直接用提前定义好的工具类组合就行
• 样式更统一：全网站复用同一套utility类，不会出现不同页面的圆角、内边距等基础样式数值不统一的问题
• 调试更简单：直接修改HTML上的类就能调整样式，不用来回翻CSS文件找对应类的规则

实际使用时你可以直接组合多个类实现效果，比如要给刚才的卡片加上阴影、内边距和圆角，直接这么写就行：

<div class="card shadow padding radius">
  卡片内容
</div>

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