𝗧𝗮𝗶𝗹𝘄𝗮𝗶𝗻𝗱 𝗖𝗦𝗦𝟰: 𝗪𝗵𝘆 𝗨𝘁𝗶𝗹𝗶𝘁𝘆 𝗦𝘁𝘆𝗹𝗲𝘀 𝗦𝗰𝗮𝗹𝗲 𝗕𝗲𝘁𝘁𝗲𝗿
许多开发者讨厌在 HTML 中看到实用类（utility classes）。它看起来很乱，就像你曾经学习要避免的那种旧式内联样式（inline styles）。你可能会觉得我们在倒退。
但传统的 CSS 会带来另一个问题。
想象一下，一个拥有 5,000 行代码的样式表。开发者 A 在两年前写了一个类。开发者 B 想要修改其中一个小地方。开发者 B 不敢动原来的类，因为他们不知道这是否会影响到一个隐藏的页面。于是，他们索性创建了一个新类。
这会导致两个主要问题：
- 每当你添加一个新功能时，你的 CSS 包（bundle）就会变大。
- 你会花大量时间去给类似
.card-body-flex-inner这样的东西命名。
Tailwind CSS 改变了这种方式。它使用像 bg-mint-500 或 p-4 这样的实用类。这种方法带来了两个主要优势：
更小的包体积 你在整个应用中复用相同的类。你的 CSS 文件不会随着项目的增加而线性增长。无论你有十个页面还是上万个页面，你的 CSS 始终保持精简。
更安全的重构 一个元素的所有样式都存在于该组件内部。如果你删除了该组件，样式也会随之消失。你不会因为误操作而破坏另一个页面上的侧边栏。
你可能会问可读性的问题。
在现代 Web 开发中，你会使用 React 或 Vue 等组件。你不会整天盯着杂乱的 HTML 看。你只需要为组件编写一次样式，然后在主布局中使用像 <Card /> 这样简洁的标签。
杂乱的细节保留在组件文件内部。你的主架构保持整洁且可预测。
我们用漂亮的标记（markup）换取了更好的可维护性。我们接受开发过程中的代码杂乱，以确保生产系统的稳定。
你是如何管理 CSS 的？你喜欢实用类吗？