Clear your CSS

ArticleDirectory

• Dust-Me selectors
• Page speed
• CSS redundancy checker
• Intellij idea
• Expression Web
• Conclusion

When we write styles, after several versions of CSS on the page have been modified, some styles may not be used, and some styles may have been renamed and forgotten to be deleted, in short, there may be
Useless styles. These useless waste of server space and bandwidth consumption will increase our maintenance costs. Is there any way to clear useless styles? Let's take a look at it today.
Several useful tools.

Dust-Me selectors

Dust-Me is a very useful and useful Firefox plug-in that can analyze all the CSS files called on your page and analyze those that are not used in the page.

• Supports local and remote style files, including the use of <link> tags, <? XML-stylesheet?> Process the style files introduced by instruction, @ import statement, and other methods. (However, the <style> block and inline styles on the page are not supported)
• Style files introduced in IE condition annotations are supported;
• You can check a page or the entire website;
• Supports css1 selectors, most css2 and css3 selectors;
• Understand General CSS hack. For example, "* html # Fuck-ie" will be considered as "html # Fuck-ie ";
• Supports Firefox 3.5 and Firefox 3.0. In fact, thanks to the improvement of the JS engine of FF 3.5, the performance of FF 3.5 is 3.0 higher than that of FF 50%.

Install: click here
. You can also download the source code of the project.
For more information, visit the dust-Me selector official page.
.

Page speed

Page speed is a front-end performance analysis tool provided by Google. It is similar to yslow, but provides some personalized and useful tools, such as Remove unused CSS:

Page speed and yslow depend on firebug. For details and installation, visit here.
.

CSS redundancy checker

CSS redundancy checker
Is a free online application that can check all useless styles on pages that use a CSS file. You can check the usage of a style on multiple pages at the same time. The disadvantage of this tool is that although Multiple HTML pages can be checked at a time, only one CSS file can be checked at a time, and manual input is required:

Intellij idea

Intellij idea
This is a very powerful IDE, similar to Dreamweaver, but it is not used much in China. The software includes an instantCodeAnalysis Tool (on-the-fly code analysis) can analyze unused classes and IDs in CSS files.

Expression Web

Expression web, as a new-generation website development tool of Microsoft, is still used by many people. Its CSS report function can check the CSS that is not used and needs to be cleared (I did not use EW to develop a website, hope that the children's shoes using the software can help confirm this ).

Conclusion

Of course, some other tools may not be mentioned here. If you know something, you can share them with us.

In addition, we usually write the style of the entire website into one or more style files, and then call all the pages or call modules, the style in a CSS file may be displayed on a page.
It is useless but used in other pages. Therefore, when using these tools to detect unnecessary styles in CSS files, you must be cautious, clearing styles may affect other pages, so
Page speed only applies to a single page and is not suitable for the entire website. It uses dust-me or CSS redundancy.
The checker can check multiple pages of the entire website or website at the same time, which may avoid foolproof.

PS: Thanks to knowledge Capsules
'S work very much.

 

Transferred from:Http://www.qianduan.net/clean-up-your-css.html