原子化 CSS 的核心思想是一次学习处处可用：每个类只做一件事，视觉一致性由预定义的间距与颜色体系保证。它直接消灭了命名难题——写之前不用纠结这个元素该叫 .card-title 还是 .title；页面变多时相同原子类自动复用，产物体积不仅不膨胀，反而因为共享而更可控，这是传统组件式 CSS 做不到的。
争议集中在可读性：一个元素的 class 可能列几十个（p-4 flex items-center gap-2 text-sm font-medium），追求语义化的人觉得像退回行内样式。但它与设计令牌天然契合，换主题只动令牌；配合按需打包工具后，最终 CSS 常常只有十几 KB，包体优势巨大。Tailwind 是这一思想最成功的工程化实现。
<style> .flex { display: flex; } .items-center { align-items: center; } .gap-2 { gap: 8px; } .p-4 { padding: 16px; } .text-sm { font-size: 14px; } .font-medium { font-weight: 500; } .bg-blue { background: #4a9eff; } .text-white { color: #fff; } </style> <div class="flex items-center gap-2 p-4 bg-blue text-white"> <span class="text-sm font-medium">若干原子类拼出的卡片</span> </div>