重构大/旧的CSS文件(Refactoring large/old CSS files)

重构大/旧的CSS文件(Refactoring large/old CSS files)

我目前正在一个100,000页的网站上工作，目前的设计已经实施了5年以上，并且连续的更新导致了四个12,000+行CSS文件。

显然，CSS已经变得很笨重，许多样式都是重复的，几乎不可能知道有多少样式真的被使用。

我们可以缩小，但这并没有真正解决问题，只是推迟了不可避免的重新工作。

所以有三个问题，那里有任何工具 ...

去重复大型CSS文件？ 扫描网站并记录CSS类和ID使用？ Greasemonkey可能会用某种脚本来实现这种扫描吗？

I'm currently working on a 100,000 page website, the current design has been in place for over 5 years and successive updates have resulted in four 12,000+ line CSS files.

Obviously the CSS has become unwieldy, many of the styles are duplicated and it's nearly impossible to know how many of the styles are actually being used.

We can minify, but this isn't really tackling the problem, just delaying the inevitable re-work.

So three questions are there any tools out there for...

de-duplicating large CSS files? scanning the site and logging CSS class and ID use? could such scanning be achieved with a script of some kind, Greasemonkey maybe?

最满意答案

http://unused-css.com/做一些你问的，他们有这样的说法： -

Latish Sehgal编写了一个Windows应用程序来查找和删除未使用的CSS类。 我没有测试它，但从描述中，你必须提供你的HTML文件和一个CSS文件的路径。 程序会列出未使用的CSS选择器。 从屏幕截图看来，无法导出此列表或下载新的干净CSS文件。 它看起来像服务仅限于一个CSS文件。 如果您想要清理多个文件，则必须逐个清理它们。

Dust-Me选择器是Firefox扩展（用于V1.5或更高版本），用于查找未使用的CSS选择器。 它从您正在查看的页面上的所有样式表中提取所有选择器，然后分析该页面以查看哪些选择器未被使用。 然后存储数据，以便在测试后续页面时，可以在遇到选择器时将选择器从列表中删除。 这个工具应该能够蜘蛛整个网站，但不幸的是我可以使它工作。 另外，我不相信你可以配置和下载删除样式的CSS文件。

Liquidcity CSS清理器是一个php脚本，它使用正则表达式来检查一个页面的样式。 它会告诉你在HTML代码中不可用的类。 我还没有测试过这个解决方案。

自重是一个CSS覆盖工具。 给定一组样式表和一组URL，它确定哪些选择器实际使用，并列出哪些可以“安全”删除。 这个工具是一个红宝石模块，只能用于rails网站。 未使用的选择器必须从CSS文件中手动删除。

Helium CSS是一个JavaScript工具，用于在网站上的许多页面上发现未使用的CSS。 您首先必须将JavaScript文件安装到您要测试的页面上。 然后，您必须调用氦气功能才能开始清洁。

UnusedCSS.com是一个易于使用的界面的Web应用程序。 输入一个网站的网址，你会得到一个CSS选择器列表。 对于每个选择器，数字表示使用选择器的次数。 这项服务有一些限制。 @import语句不受支持。 您无法配置和下载新的干净的CSS文件。

CSSESS是一个书签，可以帮助您在任何网站上找到未使用的CSS选择器。 这个工具很容易使用，但它不会让你配置和下载干净的CSS文件。 它只会列出未使用的CSS文件。

http://unused-css.com/ Does some of what you ask, and they have this to say:-

Latish Sehgal has written a windows application to find and remove unused CSS classes. I haven't tested it but from the description, you have to provide the path of your html files and one CSS file. The program will then list the unused CSS selectors. From the screenshot, it looks like there is no way to export this list or download a new clean CSS file. It also looks like the service is limited to one CSS file. If you have multiple files you want to clean, you have to clean them one by one.

Dust-Me Selectors is a Firefox extension (for v1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered. This tool is supposed to be able to spider a whole website but I unfortunately could make it work. Also, I don't believe you can configure and download the CSS file with the styles removed.

Liquidcity CSS cleaner is a php script that uses regular expressions to check the styles of one page. It will tell you the classes that aren't available in the HTML code. I haven't tested this solution.

Deadweight is a CSS coverage tool. Given a set of stylesheets and a set of URLs, it determines which selectors are actually used and lists which can be "safely" deleted. This tool is a ruby module and will only work with rails website. The unused selectors have to be manually removed from the CSS file.

Helium CSS is a javascript tool for discovering unused CSS across many pages on a web site. You first have to install the javascript file to the page you want to test. Then, you have to call a helium function to start the cleaning.

UnusedCSS.com is web application with an easy to use interface. Type the url of a site and you will get a list of CSS selectors. For each selector, a number indicates how many times a selector is used. This service has a few limitations. The @import statement is not supported. You can't configure and download the new clean CSS file.

CSSESS is a bookmarklet that helps you find unused CSS selectors on any site. This tool is pretty easy to use but it won't let you configure and download clean CSS files. It will only list unused CSS files.