我们真的需要 CSS 框架吗？

我们都很熟悉 Bootstrap 的功能和局限性。当然，曾经有人问过“Bootstrap 是什么？”，我们都会这样回答：

如今，那个时代已经过去了，使用 CSS 框架已经成为整个行业的标准做法，因为它们能帮我们节省大量时间。但我今天想提出的问题是：在 2019 年，我们真的需要它们吗？

也许不是。🤔

在这篇文章中，我们将探讨为什么你可能不再需要 CSS 框架。让我们直接开始吧！🏃🏻‍♂️

未使用的 CSS

我记得以前我们只需要添加一个，bootstrap.min.css然后就好了！应用的生产版本就准备好了……或者说我们当时是这么想的。
然而，事实并非如此。

看看这个网页的例子。他们的落地页使用了 Bootstrap。我们可以看到它被压缩了，但有趣的是，超过90% 的 CSS 代码处于 unused 状态。使用Chrome 的Coverage工具，你可以检查任何网页的 Unused 状态。只需点击cmd + shift + p并输入“coverage”即可。

是的，Bootstrap 当然有像“自定义”和“下载”这样的工具，可以让您选择组件并减少下载文件的大小，但仍然有很多代码未被使用。

观看 Addy Osmani 就此主题进行的精彩演讲。我强烈建议您观看完整视频，但如果您想节省时间，请点击此处。

小项目与大项目

Bootstrap 流行的原因是：

• 轻松制作适合移动设备的响应式设计。
• 减少开发大型项目的时间。

所以，如果你正在开发一个大型项目，而你的团队中又缺少一名熟练的前端开发人员，那么 CSS 框架可以帮你一把。但是，对于小型项目，你真的需要 CSS 框架吗？我认为不需要。我在开发Dev10的时候，没有使用任何外部框架，现在就看到了区别。

关键在于明智地评估你的项目范围。如果你的应用中没有太多的 UI 元素和页面，那么你不需要框架。

如何在小型项目中替换框架？

我认为，使用原生 CSS 实现移动端友好的响应式设计不仅可行，而且比使用框架更容易。以下是两个非常强大的 CSS 属性。

1. Flex

看看这支笔。只需几行代码，你也可以制作出像这样的超棒响应式页面。

• Flexbox 完整指南- CSS 技巧
• 20 分钟学会 Flexbox CSS - Traversy Media（视频）
• flexbox 的基本概念- MDN（一直以来的最爱）

2. 网格

把简单的 CSS 网格从框架中剥离出来，然后进行强化，这是大家都应该学习的。如果你以前只使用 Bootstrap 的网格系统，那么现在就使用grid它们来创建你自己的自定义布局吧。

• 网格完全指南- CSS 技巧
• CSS 网格布局速成课程- Traversy Media（视频）
• 网格布局的基本概念- MDN

3. 使用代码片段作为 UI 组件

下次你遇到困惑，想从按钮、导航栏等 UI 元素中寻找灵感时，不妨访问 Codepen。这是一个很棒的社区，你可以找到数百种不同的工具来帮助你。其他实用资源：

• You-Dont-Need-JavaScript - bootstrap.js 的替代品
• 最佳 CSS 代码片段网站

如果您仍然发现很难找到某些 UI 元素的 CSS，那么请使用您的老朋友Inspect Element。😊

4. 使用动画代码片段

有趣的信息：我于1月21日停止了撰写这篇文章，因为这篇文章给了我开发Animatopy的想法和灵感。如果你还记得animate.css，它是一个很棒的工具，但唯一的问题是，即使你想使用一些动画，你仍然必须包含完整的CSS。
我显然觉得这没有必要，而且令人沮丧，所以我制作了Animatopy。有了它，你无需下载Animate.css，只需复制代码片段就可以了。

很快会分享完整的故事😃

结论/Tl;dr

黄金法则是：如果项目很小，就保持小规模，不要使用框架。唯一允许的大文件是图像，你也应该尝试优化图像，而不是 CSS。

如果您还有其他有趣的建议，请在下面的评论部分随意分享。

但是大项目怎么办？

如果您刚刚开始一个新项目，这很容易做到。但是，如果您已经有一个大型项目正在运行，那么只有经过周密的规划并与团队讨论，这种转变才能成功。在本节中，我们将讨论一些优化大型项目的技巧。

1. 从项目中删除未使用的 CSS

感谢优秀的 JavaScript 社区，我们拥有了众多优秀的 CSS 优化工具。purifycss就是其中一款可以在现有大型项目中使用的优秀工具。它可以通过

• 咕噜声
• Gulp
• Webpack

2. 最小化/丑化所有功能

还有其他方法可以进一步减小 CSS 的大小，最明显的就是最小化 CSS。关于这方面的文章已经很多了，但这里有一个很棒的方法可以节省你的时间。

• 使用 JavaScript 改进 CSS

3. 制作 CSS wiki 或文档（如果放弃框架）

如果您决心彻底放弃框架，那么请从框架中汲取最大的优势——精心编写的文档。这样，开发人员可以轻松地复制粘贴代码片段，从而节省时间。相信我，这能节省大量时间，让您和您的开发人员避免其他开发人员生成的冗长的错误列表。一开始，这可能会让您感到畏惧，但从长远来看，这将使您受益匪浅。当然，最好的起点是这些框架的文档。祝一切顺利！

结论

是否使用框架，完全取决于你自己。关键在于如何有效利用框架，遵循最佳实践，并持续检查新属性是否可用旧属性替代。

好了，各位，我的分享就到这里。我可以继续说下去，但我的工作只是激发大家的想法，以便我们能够在下方评论区继续讨论。准备好你们的技巧、窍门和建议吧！