体查询时尤其是使用多个文我们通常不会将整个项目的代...

adnanhridoy2844

在单个媒体查询下。为了提高可维护性、模块化和代码结构，我们通常为多个 CSS 组件编写相同的媒体查询表达式。

让我们考虑以下未优化的 CSS 代码库示例。

这可能有点难以阅读，但我们需要注意的 手机号数据库列表 是重复的media (min-width: 768px)媒体查询。我们已经得出结论，我们想要减少样式表中的字符数，并且我们可以在单个媒体查询下嵌套多个选择器，那么为什么缩小器不删除重复的表达式呢？原因很简单。

CSS 中的规则顺序很重要，因此要合并重复的媒​​体查询，需要移动代码块。这将导致规则顺序发生更改，从而导致样式中出现不需要的副作用。

但是，结合媒体查询可能会使文件大小变得更小，具体取决于代码库和结构。像postcss-sort-media-queries这样的工具和包允许我们删除重复的媒体查询并进一步减小文件大小。

当然，有一个重要的警告，即拥有一个不依赖于规则顺序的结构良好的 CSS 代码库结构。在规划 CSS 重构和建立基本规则时，应该考虑到这种优化。

我建议首先检查优化收益是否超过潜在风险。这可以通过运行CSS 审核和检查媒体查询统计信息轻松完成。如果确实如此，我建议稍后添加它并运行自动回归测试，以捕获因此可能发生的任何意外副作用和错误。

删除未使用的 CSS  
在重构过程中，您总是有可能会得到一些未完全删除的未使用的遗留样式，或者您将有一些新添加的未使用的样式。这些样式还会增加总体字符数和文件大小。然而，使用自动化工具消除这些未使用的样式可能存在一定风险，因为这些工具无法准确预测实际使用的样式。

像purgecss这样的工具会遍历项目中的所有文件，并使用文件中提到的所有类作为选择器，只是为了谨慎起见，不要意外删除动态、JavaScript 注入元素的选择器以及其他潜在情况。然而，purgecss 提供了灵活的配置选项作为这些潜在问题和风险的解决方法。