Clean up your css

When we write styles, after the CSS of the page has been modified for several versions, some styles may no longer be used, or some styles may have been renamed and the original ones forgotten to be deleted. In short, there may be some useless content in the page. style. These useless wastes of server space and bandwidth consumption will also increase our maintenance costs. So are there any ways to clean up those useless styles? Today let us take a look at some of the more useful tools.

Dust-Me selectors

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

• Supports local and remote style files, including style files introduced using <link> tags, <?xml-stylesheet?> processing instructions, @import statements, etc. (but does not support <style> blocks and inline styles in the page)
• Support style files introduced in IE conditional comments;
• You can check a single page or the entire website;
• Supports CSS1 selectors, most CSS2 and CSS3 selectors;
• Understand common CSS hacks such as "* html #fuck-ie" will be interpreted as "html #fuck-ie";
• Supports Firefox 3.5 and Firefox 3.0. In fact, thanks to the improvements in the js engine of FF 3.5, the performance in FF 3.5 is 50% higher than that of FF 3.0.

Installation: Click here . At the same time, you can download the source code of the project . To learn more, please visit the Dust-Me selector official page .

Page Speed

Page Speed ​​is a front-end performance analysis tool provided by Google. It is somewhat similar to YSlow, but it provides some more unique and useful tools, such as Remove unused CSS:

Page Speed, like YSlow, relies on Firebug. For details and installation, please visit here .

CSS Redundancy Checker

CSS Redundancy Checker is a free online application that can check all pages that use a certain CSS file for useless styles. You can check the usage of a certain style in multiple pages at the same time. The disadvantage of this tool is that although it can check multiple HTML pages at a time, it can only check one CSS file at a time, and you have to enter it manually:

IntelliJ IDEA

IntelliJ IDEA is a quite powerful IDE, similar to DreamWeaver, but it is not used much in China. The software includes an on-the-fly Code Analysis tool that can analyze unused classes and ids in CSS files.

Expression Web

Expression Web, Microsoft's new generation website development tool, is still used by many people. Its CSS Report function can check unused CSS that needs to be cleared (I have indeed never used EW to develop a website. I hope children who use this software can help. Check this out).

Conclusion

Of course, there may be other tools that are not mentioned here. If you know something about it, you can share it with everyone.

In addition, we usually write the styles of the entire website into one or more style files, and then call them all in the page or call them in modules. Then the styles in a certain CSS file may not be used in a certain page but are used in a certain page. It is used in other pages, so when using these tools to detect redundant styles in CSS files, you need to be cautious. Clearing the styles may affect other pages, so the check results provided by Page Speed ​​only apply to a single page. , is not suitable for the entire website, but when using Dust-Me or CSS Redundancy Checker, you can check the entire website or multiple pages of the website at the same time, which may avoid mistakes.

PS:Thanks to Knowledge Capsules ' work very much.