How can I clear useless css styles?

Source: Internet
Author: User
How can I clear useless css styles? 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, some useless styles may exist in the page. These useless waste of server space and bandwidth consumption will increase our maintenance costs. Is there any way to clear useless styles? Today, let's look at 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%.

You can download the source code of this 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.

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
Check Multiple HTML pages, but only one CSS file can be checked at a time, and manually enter:

IntelliJ IDEA

IntelliJ IDEA
This is a very powerful IDE, similar to DreamWeaver, but it is not used much in China. This software includes an On-the-fly Code
Analysis) to analyze the class and id that are not used in the CSS file.

Expression Web

Expression Web, as a new-generation website development tool of Microsoft, is still used by many people. Its CSS
The Report function can be used to check the CSS to be cleared (I did not use EW to develop a website, and 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.

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.