您知道未使用的 CSS 对性能的

rmamin

影响吗？剧透：很多！在本文中，我们将探索一种面向 Sass 的解决方案，用于处理未使用的 CSS，避免涉及无头浏览器和 DOM 模拟的复杂 Node.js 依赖项。
在现代前端开发中，开发人员应该致力于编写可扩展和可维护的CSS。否则，随着代码库的增长和更多开发人员的贡献，他们可能会失去对级联和选择器特异性等细节的控制。

实现这一目标的一种方法是使用面向对象 CSS (OOCSS) 等方法，该方法不是围绕 电报号码数据 页面上下文组织 CSS，而是鼓励将结构（网格系统、间距、宽度等）与装饰（字体、品牌、颜色等）。

种方法通常是在 Sass 框架（例如Bootstrap、Foundation ）的帮助下实现的，或者越来越常见的是，可以通过定制框架来更好地适应项目。

所以现在我们使用从模式框架、UI 组件和实用程序类中精心挑选的 CSS 类。下面的示例说明了使用 Bootstrap 构建的常见网格系统，该系统垂直堆叠，然后一旦到达 md 断点，就会切换到 3 列布局。

处使用以编程方式生成的类（例如.col-12和 ）来创建此模式。.col-md-4但是.col-1通过.col-11, .col-lg-4,.col-md-6或 呢.col-sm-12？这些都是类的示例，它们将包含在已编译的 CSS 样式表中，由浏览器下载和解析，尽管并未使用。



在本文中，我们将首先探讨未使用的 CSS 对页面加载速度的影响。然后，我们将讨论一些现有的解决方案，将其从样式表中删除，然后是我自己的面向 Sass 的解决方案。

参加关于前端、设计和用户体验的精彩研讨会，包括实用要点、现场会议、视频录制和友好的问答。与布拉德·弗罗斯特、斯蒂芬·沃尔特和其他许多人一起。

这是谢菲尔德联队的网站，我当地的足球队（这就是殖民地的足球队🇺🇸）。（大预览）
我们可以看看他们的主页上实际使用了多少 CSS 吗？快速 Google 搜索会显示大量可以完成这项工作的在线工具，但我更喜欢使用Chrome 中的覆盖率工具，它可以直接从 Chrome 的 DevTools 运行。让我们尝试一下。