Firefox plugin CSS Usage: A tool to lose weight in CSS

Web page Production WEBJX article introduction: CSS Weight Loss tool-css Usage.

Front-end build engineers often encounter the scale of the site's products, product quantity, daily topic up and down the line and so on, resulting in the Web site's CSS slowly become bloated and thus affect the site's user experience, in this case, to the website CSS file weight loss similar to the big project of Haidilaozhen, because a little inattentive, a inadvertently deleted , it will cause an accident on the product line. Below we give you recommend a CSS weight-loss tool –firefox plugin css Usage.

First, we need to install Firefox ( swipe here to download ), or make sure that you've installed a version already above 3.1;
The second step, the installation front-end developers the most popular development tools Firebug;
The third step, the installation of CSS Usage 0.2.2(write this article version);
The fourth step, in the browser to open the page we want to optimize (local page also can), click on the lower right corner of the Firebug small icon, open the Firebug tool window, we will see in the tool options we have a CSS usage tool button.

Let's first analyze the use of the top three function buttons

Scan: By literal means, we can know that this is a tool to scan the current page, if our site has only one page or several pages, we can use this function button to view the page's CSS practical situation.

clear: Clears the scan results, but after we look at the page and make changes to the CSS, we do not need the previous scan results, then we can use the clear function key to erase the previous scan results cache, restart our scan.

AutoScan: Our website may have a lot of pages, more likely to have a lot of pop-up layer, if we click the scan every time, will occupy us a lot of time, AutoScan function key can make our scanning work more automation, improve our efficiency.

What happens when we click on the scan button? We take the single arm of the Old Song blog as a case http://blog.sina.com.cn/laosong11
After clicking on Scan, CSS usage scans the current page HTML and style, as shown below

The image above is what I did when I folded the scan, and we can see that the CSS usage the inline (inline) style of the page CSS style sheet and the outer chain style, and the HTML scans and shows the load time.

Here we expand an inline style

We can see this line CSS Selector seen, seen before, unseen,: hover, tell us "lists the status of the CSS selector:
Green – Indicates that the current scan sees the
Dark green – seen in previous scans,
Red – The representation is not found in both current and previous scans.
Gray – The selector CSS that represents the pseudo class, this part will be ignored.
At the bottom of this list, we will also see a statistic that tells us how much has been found, how many have not been found, how much is overlooked, and how much the CSS is useful for coverage.

At the same time, CSS usage also gives us statistics on how many times a CSS selector is applied

If we have been using the Auto scan function, our scan times are also cumulative, such as we from the home page to the directory, then to the picture, and finally arrived about me, every time the page jump, CSS Usage will automatically increase the number of pages scanned. The following figure:

If you want to know, we are all on which pages of the scan, is not covered to all the pages, you can see about the pages of the scan record

If we just want to lose weight to CSS, then we can start with the red selector, CSS usage to provide us with a more intelligent tool, export cleaned css (exported after the clean CSS). But using this tool directly requires courage for many large web sites. , my advice is to insure some good, we can choose the name of the selector, through the search function of the folder, to find out whether this CSS selector style has been used as a component of the offline product or components, has no effect. Maybe we found it in a corner, so we just had a cold sweat, Instead of having to wait for the modified file to come out in a cold sweat.

We also want to mention the disadvantages of this tool:
If your site uses a lot of Ajax and DHTML, you need to open as many hidden div/windows and tabs as you can to allow CSS usage to crawl as much content as possible.
If we have a large number of Web site pages, CPU and memory consumption will be larger, need enough patience.

We just introduced the method of removing invalid CSS selector, if you want to improve the speed of the website more comprehensively, then you may need to combine firebug\ yslow\ Page Speed to find better answer.

The way to recommend several online CSS weight loss tools:
CSS Validation Service http://jigsaw.w3.org/css-validator/
Css optimiser http://www.cssoptimiser.com/
Clean CSS http://www.cleancss.com/
CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor

Original:CSS weight Loss tool-css Usage