AI 治好了我的 CSS 框架恐惧症

简介: 本文介绍了如何利用VSCode和MarsCodeAI插件在原生CSS和不同CSS框架间无缝切换。极大提升了开发效率。尽管AI工具存在局限性,但学会利用AI辅助编程已是大势所趋。建议尝试MarsCode插件,体验AIGC时代的低代码编程。

00. 写在前面

大家好,我是大家的林语冰。

前端工程中,苦于“前 CSS3 时代”相对落后的原生语法,CSS 架构一直是前端架构师的痛点之一。

因此,我们一般会在项目里引入更先进的 CSS 框架或预处理器,比如国内比较火的 SCSS/LESS,或者海外人气爆棚的 Tailwind CSS/UnoCSS 等。

00-css.png

问题在于,当我们学习从原生 CSS 升级到 SCSS,或者老板要求从 SCSS 迁移到人气更高的 Tailwind 框架时,不同 CSS 框架的学习成本也不容小觑。

本质上而言,这些 CSS 框架提供的高级语法最终都会被转译为原生 CSS,而这种语法转换工作恰恰是 AI 编程助手的拿手好戏。

所以,本期我想分享如何利用 VSCode 和 MarsCode AI 插件,在原生 CSS 和不同 CSS 框架中无缝衔接,直接让 AI 解放我们的双手,不必再因为不同的 CSS 框架而头大。

01. 前期准备

本文的示例代码是用原生 CSS 实现一个仿真的 iPhone 手机,类似的产品模型网页预览效果在很多电商网站都比较常见,最终实现效果如下所示:

01-iphone.png

上述手机模型对应的原生的 HTML 结构和 CSS 代码如下:

(PS:此处代码仅供参考,大家可以用自己的样式代码进行后续测试,不需要关注这里的代码细节)
02-html.png

03-css.png

02. VSCode AI 插件

假设上述示例是项目遗留的旧代码,我们想要使用其他 CSS 框架重构为可维护的高级样式代码,就需要和 AI 助手联动,让 AI 帮我们写代码。

首先,我们需要可以使用手机号或邮箱注册一个账号,然后在 VSCode 里搜索和安装 MarsCode 扩展插件,登录后就可以在 VSCode 里直接使用 AI 编程助手。

另外,豆包 MarsCode 使用的是字节跳动的国产大模型,所以我们不需要考虑科学上网等复杂问题。

接着就可以让 AI 干活了,我们可以把原生 CSS 抽离到单独的样式文件中,然后让 AI 把它转译为 SCSS 版本,只需要通过聊天的方式命令 AI 执行任务即可,不需要我们手动敲一行代码。

04-ai.png

MarsCode 比较人性化的一点是,生成的代码可以直接一键保存到新文件中,然后我们可以测试生成的 SCSS 代码是否和原生版本等效,如果效果有偏差,可以尝试多生成几次。

我这里生成的 SCSS 代码也可以正常工作,因为样式逻辑并不复杂,但所有原生 CSS 都被重构为 SCSS 的嵌套语法。

毋庸置疑,在代码编译或重构方面,AI 可以明显提高我们的生产力,哪怕是复杂的样式代码也不例外。

03. 样式构建

目前前端工程中,大部分项目可能会依赖 Vite 工具链构建,因此我们也可以引入 Vite,再集成需要的 CSS 框架。

Vite 配置在官方文档有具体介绍,以 SCSS 为例,我们需要安装模块,然后更改配置文档。

05-vite.png

实际测试中,我偷懒不看文档,而是直接询问 AI 助手如何配置,MarsCode 虽然给出了答案,但是答案未必有效,可能出现配置失败,或者配置生效,但不是最佳配置的情况,我猜可能跟目前 MarsCode 的与训练模型的局限性有关。

这也说明和 AI 编程助手一起使用时,我们最好还是有对应 CSS 框架的知识储备,才能放心地偷懒,遇到 bug 也能了然于胸。

另外,在 CSS 框架选型方面,目前我更推荐 UnoCSS,因为它是一个同构引擎,这意味着,UnoCSS 默认兼容 Tailwind 同款语法,也能够支持类似 SCSS 的功能,更加通用。

在 AI 生成代码过程中,不同 CSS 框架语法本身不会给 AI 带来太大负担,我们同样只需要通过对话,就能生成对应框架的代码。

比如我让 MarsCode 生成的 UnoCSS/Tailwind 代码,也能一键实现相同的样式效果。

06-uno.png

高潮总结

CSS 框架或预处理器的本质是提供了某些比原生 CSS 高级的语法,方便我们在前端工程中实现可维护的样式架构,但它们最终还是要编译为原生 CSS。

一般而言,在不同的 CSS 框架中迁移,我们需要重新学习和手动重构,AI 编程助手可以辅助我们一键迁移。

在 VSCode 中,我们可以借助 MarsCode 插件,轻松地将原生 CSS 代码重构为不同 CSS 框架的代码,无需手动敲一行代码,这提高了我们的开发效率,但同时也要注意 AI 工具的局限性。

目前 AI 无法淘汰程序员,但 AI 会淘汰不懂 AI 的程序员。你可以注册和安装 VSCode 插件,在 VSCode 中提前尝试 AIGC 时代的低代码编程方式。

官方链接和二维码在这里分享给大家:https://www.marscode.cn/events/s/ikWsGYKj

相关文章
|
机器学习/深度学习 传感器 算法
GA-LSTM回归预测 | Matlab遗传算法优化长短时记忆网络回归预测
GA-LSTM回归预测 | Matlab遗传算法优化长短时记忆网络回归预测
|
监控 安全 Oracle
⭐万字长篇超详细的图解Tomcat中间件方方面面储备知识⭐
LNMT 1.JAVA简介 常见的大型平台有LNMP、LNMP、LNMT JAVA:LNMT(T表示Tomcat容器,放java代码的)
564 15
⭐万字长篇超详细的图解Tomcat中间件方方面面储备知识⭐
|
运维 安全 Ubuntu
在 Ubuntu 中如何设置和管理 root 用户权限?
在 Ubuntu 中如何设置和管理 root 用户权限?
1251 0
|
关系型数据库 MySQL Java
Springboot + Mysql8 读写分离实战
在实际的生产环境中,为了确保数据库的稳定性,我们一般会给数据库配置双机热备机制。
508 0
Springboot + Mysql8 读写分离实战
|
弹性计算 人工智能 Cloud Native
急速搭建 Serverless AI 应用:为你写诗
AI model serving 是函数计算一个比较典型的应用场景。数据科学家训练好模型以后往往需要找软件工程师把模型变成系统或者服务,通常把这个过程称之为 model serving。函数计算无需运维和弹性伸缩的特性,正好符合数据科学家对高可用分布式系统的诉求。本文将介绍把一个 TensorFlow CharRNN 训练的自动写五言绝句古诗的模型部署到函数计算的例子。
急速搭建 Serverless AI 应用:为你写诗
|
开发者
2024 乘风者计划全新启航!快来加入吧!
 2021年,阿里云开发者社区焕新升级,重磅推出“乘风者计划”!诚邀四海技术博主入驻社区,泼墨云间,书写天地。入驻社区,即可享丰厚权益! 新的一年,乘风者计划重磅升级!
250652 81
2024 乘风者计划全新启航!快来加入吧!
|
Oracle 关系型数据库 Linux
Oracle 19c Centos7 静默安装记录整理 2
Oracle 19c Centos7 静默安装记录整理
|
监控 Oracle 关系型数据库
|
存储 监控 Java

热门文章

最新文章