温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

2021年优秀的CSS框架有哪几种

发布时间:2021-10-15 10:19:25 来源:亿速云 阅读:139 作者:iii 栏目:web开发

这篇文章主要讲解了“2021年优秀的CSS框架有哪几种”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“2021年优秀的CSS框架有哪几种”吧!

有3种CSS框架

在我们潜入之前,您需要了解3种不同类型的CSS框架。做出正确的选择很重要。

(1) 预处理器和CSS变压器

这些是构建时框架,默认情况下它们不会输出CSS。

它们添加了不存在的功能,用于更快地编写CSS。

我使用的着名人士是:SASS,Less,Stylus和PostCSS。

每个都有基于它们的其他框架或插件。例如,有SASS编写的SASS,以更快地创建网格布局。

您经常会看到它们包含在前端框架或booterplates中。

它们不是CSS UI框架。

(2) 基于UI套件和组件的CSS框架

这些是最常用的CSS框架。

他们带有预建和自主的UI。这是我知道使用CSS创建接口的最快方式。

但他们也有他们的缺点。HTML结构主要是预定义的,并且设计并不总是容易自定义。

简而言之:他们非常自以为是。

我自2011年以来使用的那些:Bootstrap,Foundation,Skeleton,Materialize,Milligram和Bulma。

(3) 原子/实用优先的CSS框架

原子CSS和效用 - 第一CSS是非常相似的概念,我甚至会说同样的话,它在过去的3〜4年里变得非常受欢迎。

这两个主要原因是:React 风格 - 组件和TailwindCSS。

简而言之:这两个概念都包括在HTML上直接编写CSS类或属性。

因此,它非常灵活,您可以创建所需的HTML结构,但它的方式速度慢,而不是与基于组件的CSS框架。

如果您已阅读其他邮件,则会了解我在哪里。

好的,那么最好的CSS框架是什么?

  • 对我来说,最好的框架取决于3件事:设计,时间,团队。

  • 如果设计是常见的/无设计:Bulma或Bootstrap

  • 如果设计很复杂,我有时间:Tailwind css

  • 如果设计是复杂的,我没有时间:Bulma +很多自定义CSS

  • 如果我需要创建一个设计系统:Tailwind CSS

根据我的团队的规模和技能,我不会选择同样的工具,并且在一些非常罕见的场合,我会从头开始做CSS。

如您所见:所有情况下都没有完美的框架。

对于大多数场景,如WebApps,Admin Dashboards和Common Randing页面,基于组件的框架,如Bulma是完美的。

对于特定的登陆页面或非常重点的页面/ WebApps,Tailwind等实用框架是完美的。

好的,为什么要Bulma要优于Bootstrap和其它选项?

  • Foundation太旧,默认设计更难定制

  • Bootstrap 4的JS部分依赖于jQuery,但V5似乎很有前途

  • Skeleton和Milligram的方式太基本

  • Materialize太为自以为是,我认为有点过时

Bulma优点:

  • 大多数情况下它有很多组件

  • 通过SASS默认和非常容易自定义它是干净的

  • 它有自己的一套实用程序,这么好的两个世界

  • 您只加载您需要的东西和易于扩展的东西

  • DOC清晰,易于阅读(重要)

Bulma缺点:

  • 一切都不是可定制的,在某些情况下,您需要使CSS覆盖

为什么Tailwind优于其它样式组件?

Tailewind CSS有一个伟大的文档,并且始终在改善!

他们添加了CSS渐变,本机网格和转换为实用程序,这似乎是由于可能的组合的数量而不可能。

Tailwind CSS还基于它的大量预构造模板,就像官方的Tailewind UI等。

CSS-In-JS或原子CSS框架等样式组件和ACSS.IO,根本看起来不像CSS。虽然性能有点好,因为它基于您写的内容创建了样式表。

但我更倾向于在略微更好的性能下分离担忧。

其他实用程序 - 首先框架我试过像Tachyons我们也不够自然。Tailwind似乎是最自然和开发者的友好。

Tailwind缺点:

  • 当您的项目增长时,编译可能会慢,但新的JIT编译器将清除此问题。

  • 如果您创建了类似CANVA或GREMFLUS模板建设者等自定义CSS的应用程序,它根本不适用于。

感谢各位的阅读,以上就是“2021年优秀的CSS框架有哪几种”的内容了,经过本文的学习后,相信大家对2021年优秀的CSS框架有哪几种这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI