How to remove unused css styles. Removing unused CSS styles

Facebook

Hello, dear readers of the blog site. This is a small note from the “as a keepsake” series. The idea arose to remove extra lines from the styles file. Over the seven years of the blog’s existence, a lot of things have changed, but the lines in the STYLE.CSS file remained (just in case, or I simply forgot to remove them). Now it seemed to me that it began to weigh too much, and therefore the idea arose to clean it.

Doing this manually is quite difficult, and it is not necessary. There are ways this process automate. Some of them didn’t work for me, some had to be paid for and I considered it unnecessary. In the end, I used a semi-automatic method, which I will write about in the next few paragraphs. Looking ahead, I’ll say that we managed to reduce the size of the CSS file by almost half, which even surprised me a little.

Options for finding CSS styles that are unnecessary for the website

Replacing the styles file (its contents - I deleted the old one and inserted the new one, after which I saved the changes via Filezilla) with a new (damaged) one did not cause any visible changes on the site (not yet, at least, not revealed). Overall, I'm very pleased and recommend trying it. Fast, simple and convenient (and also free).

Good luck to you! See you soon on the pages of the blog site

You can watch more videos by going to

");">

How CSS Reset technology appeared and how to use it

CSS Reset is a list of Cascading Style Sheets properties that reset browser defaults.

This technique allows you to create a universal web service that will look the same no matter what and will help you get rid of unused styles.

Today, there are many options for implementing reset libraries, or they can also be called frameworks.

I believe that every self-respecting web application developer should have a reset framework customized for themselves. This could be one of the ready-made ones, or maybe your own personally created reset file.

As for history, a similar technology was first used by Crespanis Andrew in 2004. In his technical publications, he advised layout designers to use a universal selector at the beginning of a document with styles, i.e. *, and in it, reset the object indents that are set by default in each browser.

The software implementation of this technique looks like this:

An example of how E. Crespanis' approach works

If you run the example, you can see that the block is located close to the upper left corner.

As I already said, there are many solutions for resetting cascading style sheets written in browsers. I have already described the first method above. There are two more simple reset options that differ from Crespanis’ solution only in a few additional properties.

Thus, one of the approaches uses additional zeroing of all boundaries of web objects (adding the line border: 0;), and in the other - resetting the border parameters and outer contour elements (added to the first option outline: 0; border: 0;).

However, they all have a number of disadvantages. Since these are the very first versions of browser style control, they are not perfect. Take even a text with paragraphs. When using the first implementation of reset, the indents between paragraphs will disappear. In this case, the CSS markup will have to be adjusted each time.

Therefore, many web gurus and IT professionals continued to improve the new direction. So, Eric Meyer conducted a series of studies, studied many works written at that time, and created powerful tool called CSS Reset.

Carefully! Web mafia! Will kill any browser style standard!

So what do we have with CSS Reset? This decision does not use a universal selector, but sets style markup through tags. At the same time, the code provides for processing “problem” areas, such as border-collapse, which does not function well in some browsers.

I would like to note an important detail: resetting the style markup must be done before setting other properties, since css processes style rules in order and overwrites the values of parameters specified several times for the same tags.

Let's go back to Eric Meyer and his CSS Reset. In his solution, he prescribes rules for almost all elements css language, starting from containers and ending with such small tags as strong, var, mark and others. Here is the official second version of this document: http://meyerweb.com/eric/tools/css/reset/index.html

After the appearance of the above-described option for adjusting the site design “one size fits all” in all browsers, many large companies created their own modifications.

For example, Yahoo! created a YUI CSS Reset, which they made freely available (you can view it at this link: http://yui.github.io/yui2/#start).

Chris Poteet and like-minded people developed Siolon`s CSS Browser Reset ( http://www.siolon.com/blog/browser-reset-css/). And this could go on for a very long time.

Here I want to list some important rules and recommendations using CSS Reset:

As I already said, the first thing that should work in the css code is resetting the parameters. Although this is intuitive, very often beginners and experienced developers stumble over this error;
Counts in good form use a separate css document for CSS Reset. In addition, such a file becomes universal tool developer and can be used in various web projects;
Don't be afraid to implement personal modifications or create your own reset frameworks;
Try not to blindly use ready-made solutions for resetting styles and then redefine some parameters. This threatens code redundancy. And IT people don’t like this. Therefore, in the case of Yahoo CSS Reset, if you need alignment in the center and not left in these properties: caption, th (text-align: left;), then feel free to write keyword center.

As for me, I use my CSS Reset which includes the basic general rules templates and my amendments.

This concludes the article. I would be grateful if you appreciate my work and also join the ranks of my subscribers. Don't forget to share the link to my blog with your friends and colleagues. Good luck!

Bye bye!

Best regards, Roman Chueshov

Read: 114 times

4 out of 5

Many developers are faced with the fact that after some time of working on a project, in the files CSS styles appear about which it is impossible to say for sure whether they are used or not. This often happens when you work in a team and more than one person is working on styles. Or, for example, there were several developers before you, and you decided to change something or the designer planned a small redesign. In general, there are many options, but the result is the same - “dead” selectors are given to the browser.

Everything would be fine if there were only one or two of them, but if your file has five or six thousand lines, then there is no doubt about it - not all selectors are used, which means that by removing unnecessary ones you can make files lighter and speed up page loading. Today we will look at various programs, plugins and services for cleaning CSS files from unnecessary styles.

Firefox Extensions

Takes into account styles included in the page via , @import and. It can analyze both a single page and the entire site. At the end you will get a list of selectors that are not used on the site.

This is an extension for FireBug that allows you to find unused selectors like on separate page, and throughout the site. As a result, you will receive a list of all your selectors, among which those marked in red will be unused.

Web services

Online tool to check which selectors this file are not used on specific pages of the site. The downside is that you can’t evaluate the entire site (or rather, it’s possible, but it’s time-consuming and inconvenient).

Desktop editors

A list of code editors that somehow know how to find unused CSS styles.

TopStyle (Win)

This one can also find selectors that are used on pages, but for which there is no description in CSS files.

IntelliJ IDEA (Win, Mac, Linux)

A cross-platform editor designed primarily for working with Java.

Conclusion

In my opinion, the most successful tool of these is Dust Me. Analyzing the entire site takes less than a minute, after which you just need to find and remove the specified selectors.

By the way, if any of you use an editor or service that is not on this list, then write in the comments, I will add it. Thank you all for your attention;-)

The created site will constantly expand, and one day you will realize how difficult it is to understand its CSS.

If you have already encountered similar problem, then it's time to audit your CSS code and optimize it. We've selected 15 tools to help you do just that. Some of them will help reduce CSS file size, others will improve page performance.

1. Type-o-Matic

Type-o-matic is a Firebug plugin that can analyze the fonts used on website pages. This plugin displays a report in the form of a table with information about the properties of the fonts used ( family, size, color and more).

Although the report is presented in tabular form, you can easily edit this list by combining or removing fonts that are similar in style.

2.CSSCSS

The tool analyzes your CSS files for duplicates. This will reduce the size of the CSS and make it much more convenient to work with them in the future. The tool is very easy to install - it is implemented as an extension package for Ruby, and is launched from the command line.

3. CSS Lint

This tool will help you identify problems in your CSS code. The tool checks the basic syntax of styles and also applies a set of rules to code that is suspicious. All rules are pluggable, so you can easily change them.

4. CSS Colorguard

Often you come across clients who want to use colors that you didn’t even know existed. CSS Colorguard will help you create the necessary color schemes, and will warn you if you use two identical colors.

5. CSS Dig

CSS Dig is a Python script that runs locally that allows you to analyze the CSS properties and values of almost any site, regardless of whether the styles are located in separate file or in the page code. The tool also helps you modify, standardize, and optimize your CSS code.

6. Dust Me

Dust-Me is a plugin for Firefox and Opera that removes unused selectors from the stylesheet. The tool takes all the CSS on your site and shows you which selectors are being used and which ones are unnecessary.

7. Devilo.us

Devilo.us is an advanced engine for compressing and optimizing CSS code, which now supports CSS3.

8. PurifyCSS

The tool helps you get rid of unused CSS styles on website pages or web applications. It is able to detect even dynamically loaded CSS selectors in javascript code, and significantly compress the size of style files.

9. Atomic CSS

Atomic CSS will help you make your CSS files smaller. It allows you to optimize page loading speed, eliminates dependencies, and also does much more.

10. Clean CSS

CleanCSS is a multifunctional CSS optimizer. The tool takes your CSS code and makes it cleaner and smaller. You can optimize code written in different languages: javascript, json, python, html, etc.

11. PubCSS

The tool makes it easy to format CSS code for pages of academic publications. This is a library of CSS styles for formatting documents for printing and publishing on the Internet.

12.CSSO

CSSO (CSS Optimizer) is a tool that performs structural optimization of your CSS files.

13. Helium

Helium is a tool for identifying unused CSS properties across all pages of a website. It is javascript based and runs directly in the browser. Helium takes a list of site section URLs and then parses each page to produce a list of all the styles. Then it identifies unused CSS properties.

14. Strip Comments

Strip CSS Comments greatly simplifies the following tasks: removing comments from CSS files, reducing file sizes. It is also available as a plugin for gulp/grunt/broccoli.

15. CSS Shrinks

The tool allows you to easily optimize CSS files while maintaining the consistency and format of the markup. It has several tools that allow you to remove spaces and comments from a document.

Do you have any other useful CSS tools in mind? Please share them in the comments!

Translation of the article “ 15 CSS Tools to Audit and Optimize Your CSS Code” was prepared by the friendly project team

From the author: It’s quite difficult to talk about monolithic styles, since, usually, CSS files often swell. Removing unused CSS styles should get things under control. Before we start looking unused styles It's worth noting that there are many other strategies for writing maintainable styles. Our styles can be divided into logical parts (page layout, buttons, grids, widgets, etc.) and use a clear naming system (for example, BEM). Typically, developers do this before even looking for unused rules. I think this is right because styles have a long-term impact.

Another reason rules aren't trimmed very often is that it's simply inconvenient to find and remove unused styles in anything larger than a small web project. If the content is not static, how do you know which rules are being used and where?

Chrome Developer Tool

It turns out that in the tools Chrome developer there is already a built-in function. I tested it on a site that I knew had a lot of styles that could be removed. The feelings were mixed. The barrier to entry is very low, especially for developers who have already worked with the Chrome Developer Panel. You don't need to install anything, it's nice.

What you need to do to check the styles on the site:

Open the site you are interested in

Open the developer panel

Go to the audits tab

Select an option Web Page Performance and run

Some of the results will say “Remove unused CSS rules”. If it doesn't, then you don't have any unused styles. Congratulations! The results are divided by style. The breakdown is not just by files, but by style blocks. Really useful feature, since we only need those styles that we wrote. By at least, within the scope of this article.

Is it good?

I didn't find great simple way export the result from Chrome. You can copy directly from a block, but you need to expand it first. This makes parsing the results a little awkward. Running the test in the browser pushes us further away from working with the code, which may lead to us forgetting to test the site.

Conclusion: Useful for starters, but not a long-term solution.

UnCSS

You can use command line tools to find unused styles. UnCSS is an interesting example. It pulls the page through phantomJS and catches the styles inserted through JS. I really wanted to try this tool because it solved my problem, since Chrome Developer Toolbar is not about code editing at all. With UnCSS the result can be saved directly to a file, perfect.

Installation

I was unable to run npm install uncss on Ubuntu. Nothing serious, it turns out I forgot a couple of dependencies. Installation commands missing libraries which I ran:

sudo apt-get update sudo apt-get install build-essential chrpath libssl-dev libxft-dev sudo apt-get install libfreetype6 libfreetype6-dev sudo apt-get install libfontconfig1 libfontconfig1-dev

sudo apt - get update

sudo apt - get install build - essential chrpath libssl - dev libxft - dev

sudo apt - get install libfreetype6 libfreetype6 - dev

sudo apt - get install libfontconfig1 libfontconfig1 - dev

UnCSS can be integrated into the build process, but we'll skip that for now. I think inserting it into the build process is not the best good idea. Addy Osmani has a good article on this topic. Ideally, we'd want to remove unused styles directly from the code, rather than just filter them for the final product.

Perhaps the best solution is to do both. First, run it as a prebuild step to optimize the code. Second, run a build step to optimize styles that you don't control.

Using the Command Line

uncss http://your-site.foo/ > unused-styles.css

uncss http: //your-site.foo/ > unused-styles.css

The result is split into your-site.com site styles and Chrome browser, but are stored in one file. My site has a font-awesome font and all the icons that are not used on home page, ended up in the UnCSS output. It doesn't matter to me now. They can be hidden by running the command again and specifying ignoreSheets.

Note that ignoreSheets can accept a string (the full URL of the style to be ignored) or regular expression. It's easier with a regular expression, since there less characters, and it covers possible changes in the path to the file.

IgnoreSheets /.*font-awesome.min.css/

This is the error message that pops up when the page times out. The timeout can be increased using -t N, where N is the number of milliseconds (don’t set –t 360 and then wonder why the code didn’t wait 5 minutes).

Conclusion: UnCSS is more convenient because it is closer to the place where I edit styles. The output file is useful in eliminating unnecessary styles. I see its use because of the –includeSheets option, which automatically ignores everything that falls under the regular expression. Convenient for, for example, WordPress sites, where various plugins can adjust their styles, but the developer only needs theme styles style.css, etc.

Which tool should I use?

At first I chose UnCSS and convenient command line. However, while I was writing this article, I tried them on a couple more sites and got less promising results. In particular, I have several sites created a couple of years ago that use a framework where permanent comments are involved /*!*…*/. They don't work well with PostCSS, and therefore don't work well with UnCSS. I haven't delved into the problem yet, but perhaps more a new version PostCSS forgives such comments. However, right now this has become another barrier and I can't fully use UnCSS in my work.