关于使用原子类css的优缺点

优点

唯一性，更改会更安全

命名唯一，无重复，修改时是修改类，不是修改类的样式，不会影响其他地方

复用性强，项目大小增长曲线趋缓

这样相比似乎只是把css的大小转移到了html，最终可能只是少了几个字节。但是可以推断，当用的越多的时候，少的就越多，所以我说趋缓

<-- 原子类 -->

 

<-- BEM写法 -->

 

降低命名负担

可以减少/不再为思考class命名而烦恼

减少嵌套命名（冗长的类）

不用遵循BEM的嵌套命名方式

便捷的响应式、暗黑模式、悬停/聚焦等状态

treeshaking（taiwindcss V3、windicss、unocss）

不用维护删除废弃的样式，随意使用，只会构建使用到的类

开发时不用html和css来回切换

提高开发效率

缺点

刚开始接触的记忆负担

影响开发效率，解决方案安装对应的vscode插件，语法提示能够帮助我们，但是仍然无法完全避免去翻官方文档

蓝湖的代码无法直接复制使用

解决方案，开发一个js脚本，识别代码并转换成类名

复杂样式类名太多难以阅读和维护

Button
 

解决方案

Button
 

以上三个方案其实都无法彻底解决问题，只能算优化。

综上，我个人觉得，对于简单样式的项目比如后台，用起来真的很香。另外在设计有规范标准的情况下，做好分层和组件提取是可以大大降低这个缺点带来的影响（参考开篇引用文章中提到 ITCSS 架构）。否则，非样式简单的项目只用一些常用且意思明确的类，然后注意不要用的太多导致冗长，结合css代码一起使用，原子类只是作为协助。不然考虑到项目的维护性，还是不用为宜~

最后，其实我自己有个疑问，这种原子类，对渲染性能是提高了还是降低了，直觉上我认为是提高的，毕竟全部类都是一层，没有了类的嵌套，但碍于找不到直接的规范/标准支撑观点

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享