8

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

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

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

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

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

4

5 回答 5

3

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

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

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

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

  4. 您可以尝试使您的选择器更短（例如.main .foo .bar，可能会很好.bar） - 它会提高可读性并提高性能，但请注意这一点，如果您采取的每一步都开始出现问题，请准备好返回。

  5. 如果可能，尝试消除任何!important- 如果需要，使选择器更具体。如果大多数!important声明是为了解决特定于浏览器的问题，那么 CSS 重置可能会有所帮助，否则现在引入 CSS 重置可能会增加比解决问题更多的问题 - 如果您的应用程序中根本没有 CSS 重置的话。

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

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

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

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

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

于 2012-05-28T15:00:49.350 回答
2

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

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

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

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

于 2012-05-28T14:48:41.383 回答
1

起初我会推荐使用一些 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;
    }
}

无注册

#wrapper {
    #content {
        form#register-form {
            some-rules;
        } 
    }
}
于 2012-05-28T14:39:18.663 回答
0

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

于 2012-05-28T14:36:56.447 回答
0

我会重新开始

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

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

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

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

于 2012-05-28T14:42:59.597 回答