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

相关文章
|
Oracle 关系型数据库 Linux
Oracle 19c Centos7 静默安装记录整理 2
Oracle 19c Centos7 静默安装记录整理
|
2月前
|
机器学习/深度学习 人工智能 运维
智能化运维:AI与大数据在IT运维中的应用探索####
本文旨在探讨人工智能(AI)与大数据分析技术如何革新传统IT运维模式,提升运维效率与服务质量。通过具体案例分析,揭示AI算法在故障预测、异常检测及自动化修复等方面的实际应用成效,同时阐述大数据如何助力实现精准运维管理,降低运营成本,提升用户体验。文章还将简要讨论实施智能化运维面临的挑战与未来发展趋势,为IT管理者提供决策参考。 ####
|
8月前
|
存储 JSON 监控
Elasticsearch索引监控全面解析
Elasticsearch索引监控全面解析
183 0
|
4月前
|
数据挖掘 物联网 API
API接口在各个领域的发挥着什么样的作用呢
API接口在电商、金融、医疗、物联网、媒体和游戏等领域发挥重要作用。从商品管理、支付集成、用户管理,到金融风控、医疗数据共享、智能交通,再到内容整合、数据分析和游戏数据交互,API助力各行业实现高效协同与创新。
|
机器学习/深度学习 传感器 算法
GA-LSTM回归预测 | Matlab遗传算法优化长短时记忆网络回归预测
GA-LSTM回归预测 | Matlab遗传算法优化长短时记忆网络回归预测
|
9月前
|
开发框架 小程序 前端开发
微信小程序封装请求
微信小程序封装请求
102 0
|
Java Spring
SpringBoot不扫描某个包
因为项目中写了很多个CommandLineRunner,导致在本地启动项目的时候就会很慢,注释掉的话,又会很麻烦~~~
845 0
|
9月前
|
弹性计算 关系型数据库 数据库
阿里云史上最大力度降价:2024年阿里云服务器降价后租用费用明细报价表整理
2024年阿里云年度首次官方降价,百款产品直降,平均降幅20%,最高降幅55%,阿里云希望通过此次大规模降价,让更多企业和开发者用上先进的公共云服务,加速云计算在中国各行各业的普及和发展。阿里云将下调部署在中国大陆地域的部分公共云产品(行业云不在本次价格调整范围内):包括云服务器ECS、云数据库RDS(MySQL、PostgreSQL、MariaDB)、云数据库Redis社区版、云数据库MongoDB、云数据库ClickHouse社区兼容版的特定规格包年/多年官网折扣价、节省计划(云服务器大陆地域ECS计算型节省计划、RDS MySQL全地域节省计划),以及对象存储服务 OSS 按量付费、预留
394 0
|
9月前
|
分布式计算 数据库 开发者
单体架构
单体架构介绍
138 3
|
运维 安全 Ubuntu
在 Ubuntu 中如何设置和管理 root 用户权限?
在 Ubuntu 中如何设置和管理 root 用户权限?
1251 0

热门文章

最新文章