有关清理和维护大型css文件的提示 [英] Tips for cleaning and maintaining a big css file

问题描述

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

我想重新组织文件，拆分

但它似乎是一个巨大的任务，文件和应用程序是如此大而复杂我不知道它是否甚至可以不打破的东西（而不是看到它）。

我使用在线工具审计了该文件，它似乎可以使用某种的自动重构，没有太多的风险。我也尝试了几个工具来检查选择器是否实际使用，问题是，这个Web应用程序是完全写在javascript中，所以整个事情是动态的，常规工具几乎不可用（没有正确的链接，没有网站地图等等）

你们有关于如何继续，从哪里开始，甚至是否值得我的时间的任何建议？ / p>

解决方案

重构这样一个巨大的代码将是非常耗时和困难的，这是我的2p值得，从我的经验： p>

1. 开始分支项目（这里我假设您使用的是版本控制工具） - 这将允许您独立播放




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




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

   可以尝试使您的选择器更短（例如 .main .foo .bar 可能很好，因为 .bar ） - 它将提高可读性并提高性能，




4. 如果可能的话，尝试消除任何一个！important - 如果需要，使选择器更具体。如果大多数！important 语句用于修复浏览器特定的问题，css重置可能会有帮助，否则引入css重置现在可能会添加更多的问题，而不是解决它们




5. 断开并重新分组css到不同的模块（和文件，如果这有帮助） - 对象面向CSS是一种可能的技术，以保持事物更可维护，如果你开始它最好的工作，但它也可以帮助你重构。 https://github.com/stubbornella/oocss/wiki 是有效的，但有其他选择您可以考虑，例如 SMACSS 。




6. 之后，您可以考虑使用css预处理器，例如 Less 或Sass，允许您定义变量和混合（类似于功能），模块化和更多 - 这可能最终是一个非常昂贵的任务，所以仔细评估，这将带给你更多的好处比痛苦。



写一切可能会比重构耗费更少的时间，所以如果你的评估会显示重构不会带来足够的好处，那么不要害怕离开事情。

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

I just started this new job, where as the designer I have to maintain the CSS file for our web app. Right now it spans almost 7000 lines, weights over 160kb and has hundreds of !important rules.

I would like to reorganize the file, split it into sub sections, clean it, and homogenize its syntax.

But it seems like a huge undertaking and the file and the app are so big and complex that I wonder if it is even doable without breaking something (and not seeing it).

I have audited the file using online tools, and it seems I can use some sort of automated refactoring without risking too much. I have also tried a few tools to check if selectors are actually used, the problem is that this web app is written completely in javascript, so the whole thing is dynamic and regular tools are practically unusable (no proper links to follow, no site map etc.)

Do you guys have any recommendations on how to proceed, where to start, and if it is even worth my time?

解决方案

Refactoring such a huge piece of code will be extremely time consuming and difficult, here's my 2p worth, from my experience:

1. start branching the project (here I suppose that you are using a version control tool) - that will allow you to play independently with the code and tag any milestone you will reach.

2. format your CSS with a beautifier - it will increase readability and will help searching for specific declarations without missing any instances.

3. try to identify unused / redundant css and get rid of it.

4. you could try to make your selectors shorter (e.g. .main .foo .bar might be fine as .bar) - it will improve readability and increase the performance, but take this with a pinch of salt and be ready to go back if things start to break at every step you take.

5. try to eliminate, if possible, any !important - make the selector more specific if needed. A css reset could help with that if most of the !important statements were made to fix browser-specific issues, otherwise introducing a css reset now could potentially add more problems than solve them - this, if there is no css reset in your app at all.

6. break and regroup the css into different modules (and files if that helps) - Object Oriented CSS is a possible technique to keep things more maintainable, it works best if you start with it but it may also help you in refactoring. https://github.com/stubbornella/oocss/wiki is a valid one but there are alternatives that you can consider, like SMACSS.

7. After that , you may consider using a css preprocessor such as Less or Sass, allowing you to define variables and mixins (similar to functions), modularity and much more - this may end up being a very expensive task though, so evaluate carefully if this will bring you more benefits than pain.

8. test as much and as often as you can, consider unit tests to make sure that any changes you make don't break anything somewhere else.

9. Sometimes re-writing everything may end to be less time consuming than refactoring, so don't be afraid to leave things as they are if your assessment will show that refactoring will not bring enough benefits.

What you are facing is one of the most daunting tasks, so good luck with it!

这篇关于有关清理和维护大型css文件的提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！