Question

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

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

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

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

你们有没有关于如何继续，从哪里开始，以及是否值得我花时间的建议？

Answer 1

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

开始分支项目（这里我假设你使用的是版本控制工具） - 这将允许你独立玩代码并标记你将达到的任何里程碑。
使用美化器格式化您的CSS - 它将提高可读性，并有助于搜索特定声明而不会遗漏任何实例。
尝试识别未使用/冗余的css并将其删除。
您可以尝试缩短选择器（例如.main .foo .bar可能会很好.bar） - 它会提高可读性并提高性能，但是需要一点点盐和如果事情在你采取的每一步都开始破裂，那就准备回去了。
尝试消除（如果可能）任何!important - 如果需要，使选择器更具体。如果大多数!important语句用于修复特定于浏览器的问题，则css重置可能会有所帮助，否则现在引入css重置可能会增加问题而不是解决它们 - 如果没有css重置你的应用程序。
将css分解并重新组合成不同的模块（如果有帮助则将文件重新组合） - 面向对象的CSS是一种可以使事物更易于维护的技术，如果你从它开始它最有效，但它也可以帮助你重构。 https://github.com/stubbornella/oocss/wiki是有效的，但您可以考虑使用其他替代方法，例如SMACSS。
之后，你可以考虑使用一个css预处理器，如Less或Sass，允许你定义变量和mixins（类似于函数），模块化等等 - 这可能最终成为一个虽然这是非常昂贵的任务，所以要仔细评估这是否会带给你更多的好处而不是痛苦。
尽可能多地进行测试，考虑单元测试以确保您所做的任何更改不会破坏其他任何地方。
有时重写一切可能比重构更省时，所以如果你的评估表明重构不会带来足够的好处，所以不要害怕保留原样。

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

Answer 2

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

另一方面，你可以从头开始，大致将你的风格基于原作。

我建议使用Firefox上的Firebug等“Inspect Element”实用程序来查看是否有多余的样式。

还可以尝试将多个页面上显示的样式分割为常规CSS文件，将其他样式分割为特定文件。

Answer 3

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

然后你可以拿出代码片段，这些代码片段不会出现在每个页面上，并在需要的地方手动加载。

从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或更少的dinamic CSS语言可能会很好

Answer 5

我会重新开始

首先使用boilder牌http://html5boilerplate.com/ css清除样式，这样可以消除对所有重要规则的需求。样板文件旨在消除浏览器之间的样式差异。

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

查找常用元素并为这些元素使用共享类。

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

清理和维护大型css文件的提示

5 个答案: