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

前端之家收集整理的这篇文章主要介绍了清理和维护大型css文件的提示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚刚开始这项新工作,作为设计师,我必须为我们的网络应用程序维护CSS文件.现在它跨越了近7000条线路,重量超过160kb,并且有数百条重要规则.

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

但它似乎是一项巨大的任务,文件和应用程序是如此庞大和复杂,我想知道它是否可行而不破坏某些东西(并没有看到它).

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

你们有什么关于如何继续,从哪里开始,以及是否值得我花时间的建议?

解决方法

根据我的经验,重构如此庞大的代码将是非常耗时和困难的,这是我的2p值得:

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

你面临的是最艰巨的任务之一,祝你好运!

原文链接:https://www.f2er.com/css/215764.html

猜你在找的CSS相关文章