css - 清理和维护大 css 文件的技巧

Question

我刚开始这份新工作，作为设计师，我必须为我们的 Web 应用程序维护 CSS 文件。现在它跨越近 7000 行，权重超过 160kb，并有数百条重要规则。

我想重新组织文件，将其拆分为多个子部分，对其进行清理并使其语法统一。

但这似乎是一项艰巨的任务，文件和应用程序又大又复杂，我想知道它是否可以在不破坏某些东西(并且没有看到它)的情况下可行。

我已经使用在线工具审核了该文件，看来我可以使用某种自动重构而不会冒太大风险。我还尝试了一些工具来检查是否实际使用了选择器，问题是这个网络应用程序完全是用 javascript 编写的，所以整个过程是动态的，常规工具实际上无法使用(没有合适的链接，没有站点地图等等。)

你们对如何进行，从哪里开始，以及是否值得我花时间有什么建议吗？

Answer 1

重构如此庞大的代码将非常耗时且困难，根据我的经验，这是我的 2p 值(value):

开始对元素进行分支(这里我假设您使用的是版本控制工具)- 这将允许您独立处理代码并标记您将达到的任何里程碑。

使用美化器格式化您的 CSS - 这将提高可读性，并有助于在不遗漏任何实例的情况下搜索特定声明。

尝试识别未使用/冗余的 css 并摆脱它。

你可以试着让你的选择器更短(例如 .main .foo .bar 可能像 .bar 一样好) - 它会提高可读性并提高性能，但要小心一点，如果事情开始破裂，准备好回去在您迈出的每一步。

如果可能，尝试消除任何 !important - 如果需要，使选择器更具体。如果 !important 的大部分内容，css 重置可以帮助解决这个问题。声明是为了修复特定于浏览器的问题，否则现在引入 css 重置可能会增加比解决它们更多的问题 - 如果您的应用程序中根本没有 css 重置。

将 css 分解并重新组合到不同的模块(如果有帮助，还有文件) - 面向对象的 CSS 是一种使事情更易于维护的可能技术，如果您从它开始它效果最好，但它也可以帮助您进行重构。 https://github.com/stubbornella/oocss/wiki是有效的，但您可以考虑其他替代方案，例如 SMACSS .

之后，您可以考虑使用css预处理器，例如Less或 Sass，允许您定义变量和混合(类似于函数)、模块化等等——尽管这最终可能是一项非常昂贵的任务，因此请仔细评估这是否会给您带来更多的好处而不是痛苦。

尽可能多地进行测试，考虑单元测试以确保您所做的任何更改不会破坏其他任何地方。

有时，重写所有内容可能比重构更耗时，因此如果您的评估表明重构不会带来足够的好处，请不要害怕保持现状。

您面临的是最艰巨的任务之一，祝您好运!