CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章是的，这是2021年优秀的CSS框架由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

我在2007年开始学习CSS。是的，从那时起，我们已经走了很长的路.

在2021年，前端增长太快了。对于每个项目的Scratch执行CSS，难以耗时。更不用说，选择正确的CSS框架也不是一项简单的任务.

我经常看到初级前端或后端开发人员问：什么是最好的CSS框架？

因此，在多年来学习和使用很多CSS技术之后，我想和你分享我认为今天最好的CSS UI框架.

> CSS UI Frameworks in 2021 。

有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的应用程序，它根本不适用于。

结论 。

Bulma对我来说是基于组件的最佳CSS框架，但我不会为特定设计使用它或创建我自己的UI-kit或设计系统.

Tailwind如果需要为您创建UI套件，设计系统或设计特定页面，则为我最佳原子/实用程序 - 首先CSS框架.

在这两种情况下，您仍然需要为中到大项目编写一些CSS。没有银弹.

目前在Beta的Bootstrap V5似乎非常有前途与它自己的SVG图标， 。

我希望这使得CSS世界对您有点更清晰.

原文链接：https://itnext.io/yes-heres-the-best-css-framework-in-2021-2c9eb2ced678 。

文章来源：https://www.toutiao.com/i6943038038629073440/ 。

最后此篇关于是的，这是2021年优秀的CSS框架的文章就讲到这里了,如果你想了解更多关于是的，这是2021年优秀的CSS框架的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。