我是2007年开始学习CSS的。是的，从那时起我们已经走了很长一段路！2021年，前端发展太快了。Scratch为每个项目执行CSS，这既困难又耗时。更不用说，选择合适的CSS框架也不是一件容易的事。我经常看到初级前端或后端开发人员问：最好的CSS框架是什么？因此，在多年来学习和使用许多CSS技术之后，我想与您分享我认为当今最好的CSSUI框架。>2021年的CSSUI框架共有3种CSS框架在我们深入研究之前，您需要了解3种不同类型的CSS框架。做出正确的选择很重要。(1)PreprocessorsandCSSTransformers这些是构建时框架，它们默认不输出CSS。它们添加了不存在的特性，用于更快地编写CSS。我使用的著名的有：SASS、Less、Stylus和PostCSS。每个都有基于它们的其他框架或插件。例如，有用SASS编写的SASS，可以更快地创建网格布局。您会经常看到它们包含在前端框架或引导板中。它们不是CSSUI框架。(2)基于UI工具包和组件的CSS框架这些是最常用的CSS框架。它们带有预构建的自主UI。这是我所知道的使用CSS创建界面的最快方法。但它们也有缺点。HTML结构大多是预定义的，设计并不总是易于定制。简而言之：他们非常自以为是。我从2011年开始使用的工具有：Bootstrap、Foundation、Skeleton、Materialise、Milligram和Bulma。(3)Atomic/utility-firstCSS框架AtomicCSS和utility-firstCSS是非常相似的概念，甚至可以说是一样的，它在最近3~4年里变得非常流行。两个主要的是：ReactStyle-Components和TailwindCSS。简而言之：这两个概念都包括直接在HTML上编写CSS类或属性。所以它非常灵活，你可以创建你想要的HTML结构，但它比基于组件的CSS框架要慢得多。如果你读过其他邮件，你就会知道我在哪里。好的，那么最好的CSS框架是什么？对我来说，最好的框架取决于三件事：设计、时间、团队。如果设计很普通/没有设计：Bulma或Bootstrap如果设计很复杂而我有时间：Tailwindcss如果设计很复杂而我没有时间：Bulma+大量自定义CSS如果我需要创建一个设计系统：基于TailwindCSS我的团队的规模和技能，我不会选择相同的工具，在极少数情况下，我会从头开始做CSS。如您所见：没有适用于所有情况的完美框架。对于大多数场景，如WebApps、管理仪表板和CommonRanding页面，基于组件的框架如Bulma是完美的。对于特定的登陆页面或非常集中的页面/WebApps，像Tailwind这样的实用框架是完美的。好的，为什么Bulma应该比Bootstrap和其他选项更好？Foundation太旧，默认设计更难定制。Bootstrap4的JS部分依赖于jQuery，但V5似乎很有前途。我认为它有点过时了Bulma优点：在大多数情况下，它默认有很多组件，并且很容易通过SASS进行自定义，它很干净，它有自己的实用程序集，这样一个很好的两个世界，你只加载你需要的和易于扩展的东西DOC清晰易读（重要）Bulma缺点：一切都不可定制，在某些情况下你需要覆盖CSS为什么Tailwind比其他样式组件更好？TailewindCSS有一个很棒的文档，并且一直在改进！他们添加了CSS渐变、本机网格和过渡到实用程序，由于可能的组合数量太多，这似乎是不可能的。TailwindCSS也基于其大量预建模板，如官方TailewindUI等。CSS-In-JS或AtomicCSS框架以及ACSS.IO等样式组件看起来一点也不像CSS。不过性能要好一些，因为它会根据您编写的内容创建样式表。但我更倾向于以稍微更好的性能来分离关注点。其他实用程序——第一帧我尝试像Tachyons一样我们不够自然。Tailwind似乎是最自然和开发人员友好的。Tailwind缺点：随着项目的增长，编译速度可能会变慢，但新的JIT编译器会解决这个问题。如果您使用CANVA或GREMFLUS模板构建器等自定义CSS创建应用程序，它根本不起作用。结论Bulma对我来说是最好的基于组件的CSS框架，但我不会将它用于特定设计或创建我自己的UI工具包或设计系统。如果您需要为您创建UI工具包、设计系统或设计特定页面，Tailwind是我最好的原子/实用程序优先CSS框架。在这两种情况下，您仍然需要为大中型项目编写一些CSS。没有灵丹妙药。目前处于测试阶段的BootstrapV5似乎很有前途，它有自己的SVG图标，我希望这能让你的CSS世界更清晰一些。原文链接：https://itnext.io/yes-heres-the-best-css-framework-in-2021-2c9eb2ced678
