How to clean up useless CSS styles, do you know?-CSS Tutorial-php.cn

When we write CSS styles, we often encounter changes in CSS styles or interface design. After the CSS of the page has been modified in several versions, some styles may have been used. No, perhaps some styles were renamed and the original ones were forgotten to be deleted. In short, there may be some useless styles on the page.

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.

1. Dust-Me selectors

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

Supports local and remote style files, including style files introduced using tags, processing instructions, @import statements, etc.; (but does not support style files in the page Block and inline styles)

Support style files introduced in IE conditional comments;

You can check a page or the entire website;

Support CSS1 selectors, most CSS2 and CSS3 selectors;

Understand common CSS hacks, such as "* html #fuck-ie" will be considered "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. For more information, please visit Dust-Me selector official page.

2. 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 personalized and useful tools. , such as Remove unused CSS:

Page Speed relies on Firebug just like YSlow.

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

3. 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 This 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.

5. Expression Web

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

Summary:

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

In addition, we usually write the style of the entire website into one or more style files, and then call them all in the page or call them in modules. In 52CSS.com’s article on website style file organization, There have been introductions.

Then the style in a certain CSS file may not be used in a certain page but is used in other pages. Therefore, when using these tools to detect redundant styles in CSS files, you need to keep Be cautious, clearing the style may affect other pages

So the check results provided by page speed only apply to a single page, not the entire website, but when using Dust-Me or CSS Redundancy Checker, you can Checking the entire website or multiple pages of the website at the same time may avoid mistakes.

Thank you everyone for reading, I hope you will benefit a lot.

This article is reproduced from: https://blog.csdn.net/wuchengzhi82/article/details/8669052

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

How to clean up useless CSS styles, do you know?