Geek Answers Handbook

How can you reliably track CSS usage?

My environment is Visual Studio 2010 with Resharper 6.0. I have a large website with many CSS files with many styles.

I would like to remove them, since many of them are no longer in use, I noticed that Resharper allows you to track usage, but obviously this may skip the CSS class specifications in the code, etc.

My only solution is to make search files in VS, but obviously when you have a lot of styles, it is too slow and cumbersome.

Has anyone had a similar predicament?

EDIT: It's worth mentioning that a site is a CMS containing about 10,000 pages, so anything that requires a page view can also be a bit complicated.

+8
css visual-studio-2010
source share
3 answers

There is a firefox extension called a vacuum cleaner selector that does this. You turn it on, and then go to each page. It keeps track of all css used. You splash out a new css file with all css styles being tracked.

+3
source share

Web Essentials Visual Studio Extension has a BrowserLink feature that allows you to track unused css on your site when you browse the site.

+2
source share

The way to do this is to launch your site in a mute browser such as PhantomJS and check the styles used to remove those that are not in use.

Fortunately, there is a good tool built on node called uncss that does just that:

https://github.com/giakki/uncss

I found it here:

http://addyosmani.com/blog/removing-unused-css/

About viewing all of these pages, well, I don’t know if you can create all possible URLs, then you can automate the process.

Try it and let me know if that helps.

+2
source share

More articles:


All Articles