UnoCSS学习小结

上周终于完成了去年就开始研究的一个CSS库： UnoCSS ，从去年刚接触UnoCSS的时候就感觉这个东西不一般，看似造轮子却又不完全是造轮子，从 BootStrap 到 TailwindCSS 到 WindiCSS 到各种类似的库，一直到 UnoCSS ，似乎每个CSS库都有着自己的特色，更像是一种趋势，进化的更加适合当代开发者的习惯。个人觉得算是已经基本入门UnoCSS了，所以做一点经验分享，希望对也想了解UnoCSS的开发者有所帮助。

从现代开发中，如果关注CSS这块，也离不开早期的 LESS 、 SASS 、 PostCSS 等等的发展，这些无论是纯CSS的工具还是项目构建的脚手架，高度集成和便捷性也使得前端开发的发展变化迅猛，掌握了这些工具和了解发展趋势只是一个合格的开发者最基本的，其实更多的是要了解这些推动前端发展的无论是框架还是工具，他背后的思想，设计模式往往更为重要，也是我时常和一些前端新人所强调的。

优势

这次主要是说 UnoCSS ，实际上我并没有足够的资格来评价这个东西，毕竟我还没有真正应用到大型项目中，但是这不影响我对它的基本的理解和认识，因为从我最初发现它，到现在也有一年了，我看到的和我为什么喜欢这个的原因：

• 方便。用过原子类CSS的开发者，肯定不会对此陌生，小型项目，我们可以快速使用常用的类名进行样式调整，而不用费尽脑汁去想该死的类名，类名的管理也是很有讲究的，很多缺乏项目经验的人都很难写好。而大型项目，他依然很灵活，你完全可以用它来设计自己的css模块，小型组件等，丝毫不冲突，这不仅是UnoCSS的特点，所有原子类CSS库都具备的优势。
• 体积小。根据我个人理解，它也算是在构建时先做了静态分析，他只会检测到项目中用到的类，因此丝毫不用担心生成大量unused css。他的原理和以前有提到过的PurgeCSS类似。
• 写法酷。真的，有那么些写法，让人眼前一亮，因为我确实没有看过其他一些各种场景的设计，他继承了比如TailwindCSS中group的写法，也有一些WindiCSS的写法，还有更多集合了百家之长的各种特点，那真的是太强了。
• 生态完善。从这一年来看，起初只有一个简单的首页，慢慢发展到专门的UnoCSS教程页面，各种示例和插件都有比较详细的说明，第三方的插件数量也在不断上升，关注度逐渐增高。关键是VSCode下进行开发体验真的很不错。

劣势

当然缺点和有点有时候是并存的，比如：

• 好入门的东西，就容易出现混乱的情况。如果不规范话，或者深入学习一些CSS基础，不同的人就会有不同的使用方法，造成各种混乱，后期不好维护的情况。
• 因为是文件静态分析来生成对应的样式，所以有些动态拼写出来的样式可能就没办法正常显示了，这是需要避免的，比如，我举个例子，你有个排行榜，前五名：颜色从 text-red-100 逐渐到text-red-500 ，那这个在循环的过程中不要用 text-red-\${index+1}00 ，如果非要用，可能就需要一些其他的方法处理（比如：动态加载的类名DEMO）。
• 因为写法种类真的很多，有时候盲猜都行，这样就可能出现同样的样式，不同的写法过多（我可能都会误写，比如border那些，容易记混淆），或者一些特别高级的写法，其他人难以理解。这个跟第一点有点类似，所以对项目参与者都有一些要求。
• 官方并没有提供中文文档，对英文不太好的开发者，某些细节上可能难以理解或者容易忽略。

补充

UnoCSS官方网站肯定是要读的，当然有兴趣的话，去了解下创作背景重新构想原子化 CSS，也是挺好的。当然还有个第三方的UnoCSS中文网，我看作者更新的还挺勤快，翻译也还可以，也推荐英文不好的看看。

看过上面的一些资料，基本就已经基本入门，，不过去年的相关资源不多，于是在去年建立了一个入门的示范教程UnoCSS入门教程及应用实践，由于个人的拖延，最近才基本完成，大家可以试着了解下，对应的仓库UnoCSS-Study-Examples，我觉得里面的一些示例和小说明或许也会有帮助的。

关于前面提到的各种高级写法，这里感谢在Discord上网友的帮助，这里有个列表可以参考：preset-mini-targets.ts

其实很多场景的各种特殊的使用方式，都有解决方案，就取决于你是否熟悉许多preset的功能了。

因为我个人常用的开发技术栈是 Vite , Vue.js , Element-Plus 和一些常用的CSS库。所以我之前也搭建了一个简易的Vite-Element-Plus-UnoCSS脚手架。主打一个便捷，高效。

好了，我想这些都差不多了，我这些研究成果，难免也会有出错的地方，如果发现错误或者不合理的地方，希望能够多多交流。