Geek Answers Handbook

Refactoring Large / Old CSS Files

I am currently working on a 100,000 page website, the current design is over 5 years old, and successive updates have resulted in four 12,000+ lines of CSS files.

CSS has obviously become cumbersome, many styles are duplicated, and it is almost impossible to find out how many styles are actually used.

We can minimize, but in fact, this does not solve the problem, simply delaying the inevitable rework.

So, there are three questions: are there any tools for ...

  • removing duplicate large CSS files?
  • Crawl site and log using CSS class and id?
  • can such a scan be achieved with a script, possibly Greasemonkey?
+8
javascript css regex
source share
2 answers

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

Latish Sehgal has written a Windows application to find and remove unused CSS classes. I have not tested it, but from the description you must specify the path to your html files and one CSS file. The program will then list the unused CSS selectors. In the screenshot, there seems to be no way to export this list or load a new clean CSS file. It also looks like the service is limited to one CSS file. If you have several files that you want to clean, you must clean them one by one.

Dust-Me Selectors is a Firefox extension (for version 1.5 or later) that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you are viewing, then analyzes this page to find out which of these selectors is not used. Then, the data is saved so that when testing subsequent pages, the selector can be deleted from the list as they appear. This tool is supposed to cover a whole site, but unfortunately I can make it work. Also, I don’t think you can customize and load a CSS file with styles.

Liquidcity CSS cleaner is a php script that uses regular expressions to check styles of one page. It will tell you about classes that are not available in HTML code. I have not tested this solution.

Deadweight is a CSS coverage tool. Given a set of style sheets and a set of URLs, it determines which selectors are actually used, and lists that can be "safely" removed. This tool is a ruby ​​module and will only work with the rails website. Unused selectors must be manually removed from the CSS file.

Helium CSS is a javascript tool for detecting unused CSS on many pages of a website. First you need to install the javascript file on the page you want to test. Then you must call the helium function to start the cleaning.

UnusedCSS.com is a web-based application with a simple interface. Enter the website URL and you will get a list of CSS selectors. For each selector, a number indicates how many times the selector is used. This service has several limitations. The @import operator is not supported. You cannot configure and load a 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 customize and load clean CSS files. It will list only unused CSS files.

+7
source share

If you are using Visual Studio, this extension helps to automatically combine css classes.

+1
source share

More articles:


All Articles