首页 > 其他分享 >2024年:如何根据项目具体情况选择合适的CSS技术栈

2024年:如何根据项目具体情况选择合适的CSS技术栈

时间:2024-04-03 12:45:14浏览次数:27  
标签:具体情况 项目 样式 2024 headless 组件 CSS

2024年:如何根据项目具体情况选择合适的CSS技术栈

(请注意,这是一篇主观且充满个人技术偏好的文章)

方案一: antd/element ui/类似竞品

适合情形: 项目没有设计师 or 大部分人不熟悉CSS且项目赶时间。
antd自带样式,开发人员无需学习CSS,仅需查看参考文档就可以制作出基本不丑的UI界面。

方案二: TailwindCSS + shadcn/ui

适合情形: 设计师对还原度和定制化有较高要求 and 大部分人熟悉CSS and 项目赶时间。
使用headless组件库可以充分将样式和逻辑解耦,满足设计师高度定制化的需求。
shadcn/ui的设计理念是目前headless组件库的最高效的使用方式。它没有对底层headless组件库进行任何封装,而是提供丰富和高质量的示例代码。开发者只需选择自己需要的组件,将代码复制并粘贴到自己的项目中,并根据自己的需求进行自定义。
TailwindCSS可以提高样式开发速度和统一design token.

方案三: 现代CSS

适合情形: 大家希望磨练技术 and 项目不赶时间
现代 CSS 涵盖了许多新特性,适用于那些想要深入了解 CSS 并提升技术水平的团队。

不推荐方案: sass/less/stylus

现代CSS已经拥有了以上这些预处理器的有价值的关键功能。且样式本质上是HTML的配置,无法脱离HTML单独存在。脱离文档结构进行样式的抽象和复用就好像在构造一个精巧的空中楼阁,需要高水平的开发者长期小心翼翼地维护,否则一不小心就会坍塌。

总结

选择合适的 CSS 技术栈是一个重要的决策,每个方案都有其优势和限制。我们需要根据项目的具体情况,权衡各种因素,选择最适合的方案。

标签:具体情况,项目,样式,2024,headless,组件,CSS
From: https://www.cnblogs.com/forzhaokang/p/18112434

相关文章

  • 在静态页中,js和css使用虚拟路径指向网站根目录
    第一步:修改web.config<configuration><system.webServer><handlers><addname="x"verb="GET"path="*.css.ashx"type="FileResolver"/><addname="xx"verb=&quo......
  • 2024闲鱼运营,【淘金图鉴】全解版
    2024闲鱼运营,【淘金图鉴】全解版,含15节系统性课程和配套资料,可下载观看01.闲鱼先导课.mp402.账号注册、多账号、鱼小铺和闲鱼玩家,mp403,人设包装以及养号流程,mp404,选品方式平台内和店铺运营方向-1.mp405,多元化选品渠道和上家鉴定标准,mp406,闲鱼上架如何撰写文案和......
  • Rust vs C++:2024,谁更懂错误处理?
    讲动人的故事,写懂人的代码「席双嘉,听说你的C++项目又因为忘了检查返回值导致内存泄漏,又加班了?」周五中午,在国内某科技巨头熙熙攘攘的员工餐厅,贾克强半开玩笑地戳了戳坐在隔壁的席双嘉,眼神中满是戏谑。贾克强,一个热衷于Rust的程序员,总是乐于挑战和探索新技术的边界。而席......
  • 纯CSS实现未读消息显示99+
    在大佬那看到这个小技巧,我觉得这个功能点还挺常用,所以给大家分享下具体的实现。当未读消息数小于100的时候显示准确数值,大于99的时候显示99+。1.实现效果2.组件封装<template><spanclass="col"><sup:style="{'--num':num}">{{num}}</sup></span></template......
  • 界面控件Kendo UI for jQuery 2024 Q1亮点 - 新的ToggleButton组件
    Telerik & KendoUI 2024Q1版本于2024年初发布,在此版本中将AI集成到了UI组件中,在整个产品组合中引入AIPrompt组件以及10多个新的UI控件、支持Angular17、多个数据可视化功能增强等。P.S:KendoUIforjQuery提供了在短时间内构建现代Web应用程序所需的一切,从众多UI子控件中......
  • [HTML、CSS]知识点
    【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)https://www.cnblogs.com/cnb-yuchen/p/18032061出自【进步*于辰的博客】注:本文中“子级”指子级盒子或子级标签;“逻辑位置”指根据理论推断的所在位置,“实际位置”指实际显示的所在位置。目录1、其他知识点链接......
  • 界面组件DevExpress WinForms v23.2 - 进一步增强HTML & CSS支持
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office风格的界面,还是分析处理大批量的业务数据,它都能轻松胜任!DevExpressWinForms控件日前正式发布了v23.2,此......
  • 界面控件Kendo UI for jQuery 2024 Q1亮点 - 新的ToggleButton组件
    Telerik & KendoUI 2024Q1版本于2024年初发布,在此版本中将AI集成到了UI组件中,在整个产品组合中引入AIPrompt组件以及10多个新的UI控件、支持Angular17、多个数据可视化功能增强等。P.S:KendoUIforjQuery提供了在短时间内构建现代Web应用程序所需的一切,从众多UI子控......
  • 界面控件DevExtreme JS & ASP.NET Core 2024年度产品规划预览(一)
    在本文中我们将介绍今年即将发布的v24.1附带的主要特性,这些特性既适用于DevExtreme JavaScript(Angular、React、Vue、jQuery),也适用于基于DevExtreme的ASP.NETMVC/Core控件。注意:本文中列出的功能和特性说明官方当前/预计的发展计划,此信息仅供参考之用,其中列出的功能/产品可......
  • 【2024-04-02】中医放血
    20:00绿遍山原白满川,子规声里雨如烟。乡村四月闲人少,才了蚕桑又插田。                                                 ——《乡村四月》宋·翁卷昨天,我去看了中医,是......