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

Question

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

我想重新组织文件，将其拆分为子部分，清理它并使其语法同质化。

但这似乎是一项艰巨的任务，而且文件和应用程序如此庞大和复杂，我想知道它是否甚至可以在不破坏某些东西（并且看不到它）的情况下实现。

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

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

Answer 1

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

1. 开始分支项目（这里我假设您使用的是版本控制工具）——这将允许您独立使用代码并标记您将达到的任何里程碑。

2. 使用美化器格式化您的 CSS - 这将增加可读性，并有助于搜索特定声明而不会丢失任何实例。

3. 尝试识别未使用/冗余的 css 并将其删除。

1234563如果您每走一步都开始出现问题，请返回。

4. 尽可能消除任何!important - 如果需要，使选择器更加具体。如果大多数 !important 语句用于修复特定于浏览器的问题，则 css 重置可能会有所帮助，否则现在引入 css 重置可能会增加比解决问题更多的问题 - 如果您的应用程序中没有 css 重置完全没有。

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

1234563但是，请仔细评估这是否会给您带来比痛苦更多的好处。

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

7. 有时重写所有内容可能最终会比重构花费更少的时间，因此，如果您的评估表明重构不会带来足够的好处，请不要害怕保持原样。

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

Answer 2

您将不得不查看所有代码并理解它。您不能尝试通过一些自动化实用程序运行它并让它为您完成工作。编写紧凑的 CSS 是一门艺术，你不能走捷径，否则你的文件最终会超过 160kb。

另一方面，您可以从头开始，将您的样式大致基于原始样式。

不过，我推荐的是在 Firefox 上使用像 Firebug 这样的“检查元素”实用程序来查看是否有任何多余的样式。

还可以尝试将出现在多个页面上的样式拆分为通用 CSS 文件，将其他样式拆分为特定文件。

Answer 3

首先我会推荐使用一些 CSS 预处理器。 例如，您可以使用 LESS。首先使用带有自定义选项的http://www.procssor.com 使您的CSS 更漂亮，然后将其粘贴到http://css2less.cc/。您可能需要进行一些更改以“模块化”代码。

然后你可以取出代码sn-ps，它不会出现在每个页面上，并在需要的地方手动加载。

从 LESS 编译 CSS 并开始使用它。

编辑：

所以你的 CSS 可能看起来像这样：

#wrapper #nav { some-rules }
#wrapper #content { some-rules }
#wrapper #footer { some-rules }

#wrapper #content form#register-form { some-rules }

应用 css2less：

#wrapper {
    #content {
        some-rules;
        form#register-form {
            some-rules;
        } 
    }
    #footer {
        some-rules;
    }
    #nav {
        some-rules;
    }
}

并将其模块化：

main.less

#wrapper {
    #content {
        some-rules;
    }
    #footer {
        some-rules;
    }
    #nav {
        some-rules;
    }
}

register.less

#wrapper {
    #content {
        form#register-form {
            some-rules;
        } 
    }
}

Answer 4

东西会坏掉，但没关系，你会度过难关的。由于您正在重写，因此可能会很好地研究像 Saas 或更少的动态 CSS 语言

Answer 5

我会重新开始

首先用样板http://html5boilerplate.com/ css 清除样式，这应该消除对所有 !important 规则的需要，样板旨在消除浏览器之间的样式差异。

然后可能使用类似http://lesscss.org/ 的东西来制作动态可管理的样式表。

寻找共同的元素并为这些元素使用共享类。

即使在最复杂的应用程序中，您也不应该需要 7000 行样式表。