作者：CSS 框架已经存在了一段时间，并且在前端开发领域变得非常流行。这些框架提供了代码片段，您可以直接复制粘贴到您的网站中以构建整个布局和 UI。
您可能已经阅读了很多关于它们如何对您的项目有益的文章，但在这里我想做相反的事情：强调它们可能给您的网站或应用程序带来的一些缺点，以及如何避免或减轻这些缺点。
当我问人们为什么使用某个特定的框架时，他们的回答通常属于以下一个（或多个）类别
- 速度：大多数人认为它会使开发更快。在项目的初始阶段，这可能是正确的。但是，这种收益可能是以技术债务为代价的——我们将看到债务是如何产生的——之后需要偿还，并且会产生利息。
- 最佳实践：有些人认为使用框架是最佳实践，尤其是那些刚开始前端开发的人。大量文章以及在训练营课程或提及框架的职位描述中包含框架，都强化了这种观点。
- 设计：许多开发人员只想发布一些东西，并且他们的项目没有设计师可用。CSS框架提供开发人员可以使用的一些基本设计。虽然这很有用，但结果是您的网站或应用程序最终看起来与互联网上所有其他最近的网站一样——但这是否会影响您的项目，则取决于您自己决定。
技术债务
无论使用框架的原因是什么，框架都可能在您的项目中引入技术债务。有时拥有这种技术债务是有意义的，例如，如果您需要尽快发布一些东西，或者您正在构建一个稍后将被丢弃的原型。
但是，对于大型项目（如持续运营的网站或应用程序），这种技术债务可能会变得难以管理并阻碍开发。让我们看看为什么会发生这种情况。
无语义的 HTML 代码
这不是框架本身的问题，但我已经看到它在最流行的一些框架中发生了很多次。
例如，您可能正在阅读有关按钮样式的文档：您可能会找到一段代码片段，告诉您使用 CSS 类来设置禁用按钮，而不是将disabled属性添加到<button>标签本身。
有大量的<div>或<span>示例，在这些示例中，更具语义的标签会更合适。我们就不谈<div>嵌套在<div>中，再嵌套在<div>中的情况了…
过于具体的 CSS 选择器
同样，这不是框架固有的问题，而是在最流行的框架中观察到的现象：有一种趋势是使用非常具体的选择器来创建 CSS 规则。例如
.table-responsive > .table-bordered > thead > tr > th:first-child
如果您需要覆盖<th>的一些属性会发生什么？然后您需要创建更具体的选择器！您不能仅仅通过创建像这样的通用规则来解决问题
th.important-heading { color: #000; }
相反，您需要设置如下规则
.table-responsive > .table-bordered > thead > tr > th:first-child.important-heading {
color: #000;
}
在实际应用中，没有人想编写这种代码。我们很快就会看到这些类型的规则出现
th.important-heading { color: #000; !important }
…这只会使问题更严重！
不需要的规则
如果您包含了整个框架，而不是您真正需要的部分，那么您将拥有实际上没有使用的 CSS 规则。
当然，您可以借助后处理工具来删除未使用的规则来减轻这种情况，但是一旦您开始使用 JavaScript 动态添加或删除类，您将永远无法 100% 确定您不需要该代码。
未使用的 CSS 不仅会使您的文件更大（这对于连接到蜂窝网络而不是 Wi-Fi 的移动设备来说可能是一个问题），还会使您的代码库更大，从而更难维护。
拥有您自己的观点和决策
所有框架都是有观点的。如果您没有强烈的观点，或者您的观点与框架相同，那么这不是问题。
但有时您确实有强烈的观点。例如，以下是一个框架提出的用于创建彩色文本标签的 HTML 代码
<span class=“label label-warning”>Out of stock</span>
我发现这些类是冗余的，因为我喜欢只使用我认为必要的类。如果那是我的代码，我可能只会使用一个类label-warning。
如果您是某个特定 CSS 方法（如“块、元素、修饰符”）的粉丝，而您的框架没有使用该方法，该怎么办？
框架的替代方案
编写您自己的 HTML 和 CSS。如果您不喜欢框架生成的标记，则应该编写您自己的标记。如果框架提供的 CSS 规则使您的工作效率低下，则应该创建您自己的规则。
如果您需要网格，您可以今天就使用 Flexbox，它使创建布局比使用浮动 div 容易得多。如果您不熟悉 Flexbox，请查看此MDN 指南。如果您好奇代码可能是什么样子，这里有一个我使用 Flexbox 做的圣杯布局的实现。
将来我们将拥有Grid！这将使创建布局变得轻而易举，您将再也不会想使用现有的网格框架了。这里有另一个圣杯布局的实现，这次使用的是 Grid。
（注意：要查看浏览器中实际的结果运行情况，请尝试使用Firefox Nightly或最新的Firefox 开发者版浏览器——它可以正常工作。要在任何其他 Firefox 版本中查看这些示例，您需要切换标志。转到浏览器中的about:config以启用layout.css.grid.enabled功能。）
如果您只需要一个 UI 小部件，例如自定义下拉菜单，并且您不想从头开始编写代码，您可以随时获取该部分（而不是整个框架），或者使用没有外部依赖项的第三方组件。
如果您需要一个设计可以使用，那么使用这些框架的一种合理方法是获取Sass或Less源代码，而不是生成的 CSS 文件。如果您这样做，您可以获取 mixin 并创建您自己的选择器，这将允许您拥有自己的标记。但请记住，您的网站也会与大量其他网站看起来完全一样！
如果您需要一种标准化项目中 UI 创建的方法，以便人们知道使用哪段代码以及如何添加新的界面元素，那么您需要的是样式指南（简而言之，您自己的自定义框架）。对于大型项目，您应该有一个！
总结
CSS 框架可能具有优势，但它们也有一些经常被忽视的缺点。请注意这些缺点，并了解您可以使用的工具和 API 来创建网站和应用程序的 CSS 和标记。
关于 Belén Albeza
Belén 是一位工程师和游戏开发者，在 Mozilla 开发者关系部门工作。她关心 Web 标准、高质量代码、可访问性和游戏开发。
32 条评论