关于原子化样式

目前公司中大部分项目，基本都是 Tailwind.css，虽然开发的时候是方便了。但是后续维护的时候就不好维护了。

缺乏语义化

大量 css 类名堆积在一起，在排查时也完全不好进行排查。

对于以下 html 结构，一眼望去，第一个使用的原子化类名很难分辨用途。

而第二个，使用了语义化的类名，使得很好分辨出是一个包含了一个购物车商品的购物车的容器。

<div class="w-full h-auto border border-red-200 flex flex-row flex-wrap justify-center items-center">
  <div class="w-full h-24 border-b border-gray-500 flex flex-row flex-justify-between items-center">
    <!-- something... -->
  </div>
</div>

<div class="cart-container">
  <div class="cart-item">
    <!-- something... -->
  </div>
</div>

维护麻烦

上面那段是我当场手写的，实际项目中可能是 w-[100%] h-[80px] flex items-center border border-[#123456] flex-row 或 h-[auto] flex border w-[1200px] 这种。

原则上，这些应该是要去配置文件里配置上，后续修改的时候直接修改配置文件即可。但是这只是原则上。所以导致修改的时候到处翻文件，到处改样式。

就最近遇到了一个场景，原本购物车模块只有一个商品组件，但是后来增加了新功能，导致需要增加一个新的商品组件。

这两个商品组件外观样式是一样的，只是功能逻辑不一样，初衷是为了方便维护和区分，所以拆开成两个独立的组件。

后续因为一些纠纷和业务调整，导致了整个站点需要整体改版。

这两个商品组件同样是需要改版的。但是因为用的是原子化样式，导致需要手动维护两份文件，如果是传统的 css 写法，那么我就只需要维护一份 css 文件即可。

但可惜并不是，所以我得手动调整，又因为组件功能逻辑不一样，还无法直接复制。还需要一个个去对。

特别是我们的产品是 C 端的，经常会需要变动，维护也是麻烦。

影响团队协作

首先，需要额外学习一堆的类名。原本直接上手写 css 即可，现在还需要去看那些类名，增加了上手难度。

其次，依赖沟通，比如有些类名，你以为是原子化的，实际上并不是，反之亦然。

此外，还有命名问题，比如 TRYNOW 这是适配桌面端的前缀。Fours 这是适配视口宽度低于四百时的前缀。

如果不预先沟通好，那么谁知道这是啥？

现在我和同事协作开发时，面对那一堆类名真的看着头大。

总结

虽然开发快速，只用专注于 html 即可。但相当不利于后续维护。

应该只应用于那种不会怎么变动的产品。

对于 C 端这种面向用户，需要经常变动的则不应该使用。如果真要使用，也应该定好规范。