从基础到高级，如何全面锐评39个前端技术？

大家好，我是程序员鱼皮。从夯到拉，锐评 39 个前端技术，一口气说完！ 之前我做了后端技术的从夯到拉排名，很多同学留言说想看前端版。说实话，刚开始我是拒绝的，因为前端技术实在是太多了、而且更新速度非常快，之前有个学弟还跟我吐槽什么前端娱乐圈之类的，咱也不懂好吧。 但是！既然大家想看，那我就来一期。而且这期我还会评选出唯一的 前端技术之王（frontend king），大家可以先猜一猜，会是哪个？我敢说不超过 1% 的同学能猜对。 正式开始前先郑重声明，由于每个前端技术都有自己的应用场景，很多时候没办法完全公平地去比较，所以接下来的排行会带有一定的主观性。本期鱼皮只是希望帮大家学到知识、认识更多的技术。 大家可以在评论区打出自己的评价，看看跟我想的是否一样。 视频版 - 前端排行：https://bilibili.com/video/BV11yigBfEkL 视频版 - 后端排行：https://bilibili.com/video/BV1HiqQBgEoN 评价维度 接下来我将从 5 个维度来评价这些前端技术： 实用性：能解决多少实际问题、是否为项目必备 生态成熟度：包括社区活跃度、文档完善度、第三方库丰富度 学习成本：上手难度和学习曲线 开发效率：开发速度和体验 稳定性：版本迭代是否破坏兼容性、出现安全漏洞的频率 作为开发者，我个人最看重的是 实用性和生态成熟度。 实用性就不多说了，毕竟技术是用来解决问题或者找工作赚米的。 生态好不仅意味着遇到问题能快速找到解决方案，更重要的是，因为训练数据多、社区案例丰富，AI 生成的代码质量会更高。 所以再次声明，下面的排名并不代表技术本身的优劣，会具有一定的主观性。 前端技术从夯到拉排行榜 先说说跟样式相关的前端技术。 1、Sass【人上人】 CSS 预处理器，让你用编程的方式写样式。写过原生 CSS 的都知道，一堆重复的颜色值、一层套一层的选择器，维护起来非常头疼。Sass 支持变量、嵌套、混合、继承等高级特性，可以解决这些问题。 Sass 的优点是功能强大、社区成熟，缺点是需要编译，而且现在 CSS 原生也支持变量和嵌套了。考虑到它仍然是很多大型项目的标配，给到 人上人。 2、Bootstrap【拉】 Twitter 开源的 UI 框架，提供现成的样式和组件，让你不用从零写 CSS。曾经是前端开发的标配，一套栅格系统打天下. 但是 2025 年了，还在用 Bootstrap 的项目基本都是遗留系统。组件样式过时、定制困难、体积臃肿，React、Vue 当道，谁还用这种全局样式污染的方案？给到 拉。 3、Tailwind CSS【夯】 原子化 CSS 框架的代表，快速写样式的神器。它的理念是：不写 CSS 文件，直接在 HTML 里用 class 拼样式。比如 flex justify-center items-center，一行搞定居中。 有朋友刚开始可能会觉得这玩意儿丑，class 名字一大串，觉得不就是把 CSS 写到 HTML 里了吗？但是用习惯后真香，能明显提升开发效率；再配合组件化开发，完全不用担心样式冲突。 还有一个加分项，现在很多 AI 工具生成的前端代码，默认都用 Tailwind！像很多朋友好奇为什么 AI 生成的很多界面是蓝紫色？因为 AI 训练时吃了太多使用 Tailwind UI 的网站，而 Tailwind UI 的默认配色就是蓝紫色。 考虑到它对开发效率的巨大提升和 AI 生成界面的巨大贡献，给到 夯！ 4、Element Plus【人上人】 Vue 框架的主流 UI 组件库，由饿了么团队开发。如果你用 Vue 做中后台系统，那 Element 基本是标配。 优点是组件丰富、文档清晰、国内社区活跃。 缺点是样式偏传统，不太适合 C 端项目，而且有些组件不够灵活。但考虑到国内 Vue 生态的主流地位，Element 是很多前端新人的启蒙组件库，给到 人上人。 5、Ant Design【人上人】 蚂蚁金服出品的企业级 UI 组件库，在开发 B 端中后台管理系统方面一手遮天。它不仅组件质量高、设计规范完善，而且生态非常丰富，推出了 Ant Design Pro 脚手架、ProComponents 高级组件、AntV 数据可视化方案，以及最近很火的 Ant Design X AI 组件库。而且同时有 React 和 Vue 版本，我个人非常喜欢用它。 但缺点也很明显，体积大、样式定制麻烦，没有那么适合 C 端系统。考虑到国内 B 端的统治地位，给到 人上人。