Tools for Auditing CSS

CSS code auditing is not a common task for developers' daily tasks, but sometimes it has to be done. This could be part of a performance evaluation to identify critical CSS and reduce unused selectors; it could also be to improve accessibility, to perform contrast evaluations on all colors used in the code base; it could even be to enforce consistency!

For whatever reason, and when this happens, I usually use some of the tools described in this article. But before introducing the tools, let's first understand what "audited" CSS means.

CSS audit is not easy

Typically, code auditing involves analyzing the code to find errors or other irregularities, such as possible performance issues. For most programming languages, the concept of code auditing is relatively simple: the code is either valid or invalid. But CSS is a special language, and its errors are mostly ignored by the browser. Additionally, you can implement the same style in many different ways. This makes auditing of CSS a little tricky to say the least.

You can use the extension of your favorite code editor or set up a code inspector to prevent these errors from being discovered. But that's not what I want to show here, and that's not enough. We may still use too many colors, typography definitions, or z-indexes, all of which can lead to a messy, difficult to maintain, unstable CSS code base.

To truly audit CSS, we need to dig deeper and find places that are not considered best practices. To find these places, we can use the following tools.

Browser Developer Tools

Let's take a look at the tools used for CSS auditing in Chrome Developer Tools. I'm using the Brave browser based on Chromium here. You might also want to check out this article by Umar Hansa, who compiles a whole bunch of great DevTool features released in 2020.

If you prefer to manually check your CSS code, you can use the Inspect tool. Using it we can see the CSS code applied to a specific element. Using the Inspect Arrow, we can even see more details about color, font, size, and accessibility.

Grid and Flex Inspector

There are a lot of practical details in the DevTools interface, but my favorites are the grid and Flex inspectors. To enable them, go to Settings (the pinion icon in the upper right corner of the developer tool), click Experiment, and enable CSS grid and Flexbox debugging. Although this tool is mainly used to debug layout issues, I sometimes use it to quickly determine if a CSS grid or Flexbox is used on the page.

CSS Overview

Checking CSS is very basic and all operations need to be done manually. Let's look at some more advanced DevTools features.

CSS Overview is one of them. To enable the CSS Overview tool, go to Settings, click Experiment, and then enable the CSS Overview option. To open the CSS Overview panel, you can use the CMD Shift P shortcut keys, type "css overview", and then select "Show CSS Overview". This tool summarizes CSS properties such as color, font, contrast issues, unused claims, and media queries. I usually use this tool to see how good or bad CSS code is. For example, if there is “50 shades of gray” or too many typesetting definitions, it means that the style guide is not followed, or the style guide may not exist at all.

Code Coverage Panel

Code Coverage The tool displays the amount and percentage of code used on the page. To view it, use the CMD Shift P shortcut key, type "coverage", select Show code coverage, and then click the "Refresh" icon.

You can filter only CSS files by typing ".css" in the URL filter input. I usually use this tool to understand the delivery techniques of the site. For example, if I see that the coverage is quite high, I can assume that each page will generate a CSS file separately. This may not be critical data, but sometimes it helps to understand caching strategies.

Rendering panel

Rendering panels are another useful tool. To open the rendering panel, use CMD Shift P again, type "rendering" this time, and select the "Show rendering" option. This tool has many options, but my favorite options are:

• Draw Flash —Shows a green rectangle when a redraw event occurs. I use it to identify areas that have been rendering for too long.
• Layout Offset Area —Shows a blue rectangle when a layout offset occurs. To make the most of these options, I usually set the Slow 3G preset under the Network tab. I sometimes record the screen and then slow down the video to find the layout offset.
• Frame Rendering Statistics —Shows the real-time usage of GPU and frames. This tool is very convenient when identifying heavy animation and scrolling issues.

These tools are not implied by regular audits, but I found it crucial to understand the performance of CSS code and whether it doesn't drain the device's energy.

Other options may be more conducive to debugging issues, such as emulating and disabling various features, forcing the prefers-color-scheme feature or printing media types, and disabling local fonts.

Performance Monitor

Another tool for auditing performance CSS code is the Performance Monitor . To enable it, use CMD Shift P again, type "performance monitor", and select the Show Performance Monitor option. I usually use this tool to see how many recalculations and layouts are triggered when interacting with a page or when an animation occurs.

Performance panel

Performance The panel displays a detailed view of all browser events during page loading. To enable performance tools, perform CMD Shift P, type performance, select Show performance, and then click the Reload icon. I usually enable the Screenshot and Web Metrics options. The most interesting metrics for me are first draw, first content draw, layout offset and maximum content draw. There is also a pie chart showing the drawing and rendering times.

DevTools may not be considered a classic audit tool, but it can help us understand which CSS features are used, the efficiency of the code, and its performance—all of which are key factors in auditing.

Online Tools

DevTools is just a powerful tool. But we can also use other available tools to audit CSS.

Specific visualization tools

Specificity Visualization Tool Shows the specificity of CSS selectors in the code base. Just visit the site and paste the CSS in.

The main chart shows the relationship between specificity and position in the style sheet. Two other charts show specific usage. I often use this site to find "bad" selectors. For example, if I see many specificities marked in red, I can easily conclude that the code can be improved. It is helpful to save screenshots for reference as you work hard to improve.

CSS-specific chart generator

CSS Specificity Chart Generator is a similar tool for visualizing specificity. It shows a slightly different chart, which may help you understand how CSS selectors are organized by specificity. As the tool page says, "The peak is not good, and the overall trend should be that the specificity behind the style sheet is getting higher and higher." It's interesting to discuss this further, but it's beyond the scope of this article. However, Harry Roberts does write this extensively in his article “Speciality Charts” and it’s worth a look.

CSS Statistics

CSS Statistics is another tool that provides analysis and visualization for your stylesheets. In fact, Robin wrote an article about it before and showed how he used it to audit stylesheets at his work.

You just need to enter the URL of the site and press Enter. The information is broken down into meaningful parts, from declaration counting to color, typography, z-index, specificity, and more. Again, you may need to store the screenshots for future reference.

Project Wallace

Project Wallace was created by Bart Veneman, who has covered the project on CSS-Tricks here. The power of Project Wallace is that it can compare and visualize changes based on imported content. This means you can view the previous state of the CSS code base and see how the code changes between states. I found this feature very useful, especially if you want to convince someone that the code has improved. The tool is free for a single project and offers paid plans for more projects.

CLI Tools

In addition to DevTools and online tools, there are command line interface (CLI) tools that help audit CSS.

Wallace

One of my favorite CLI tools is Wallace . After installation, type wallace, and then type the site name. The output shows all the information you need to know about the site's CSS code. My favorite thing to view is the number of usages of !important and the number of IDs in the code. Another concise message is the highest specificity number and how many selectors are used. These can be red flags for "bad" codes.

What I like most about this tool is that it extracts all CSS code from the site, not only external files, but also inline code. This is why the reports of CSS Stats and Wallace do not match.

csscss

The csscss CLI tool displays which rules share the same declaration. This is useful for identifying duplicate code and reducing the amount of code written. I will think twice before doing this, especially under today's caching mechanism. It is worth mentioning that csscss requires Ruby.

Other useful tools

Other CSS tools may not be used for auditing, but are still useful. Let's list these too:

• Color Sorter—Sort the CSS colors by hue, and then by saturation.
• CSS Analyzer—Creates analysis for CSS strings.
• constyble — This is a CSS complexity code checker based on the CSS analyzer.
• Extract CSS now — Get all CSS from a single webpage.
• Get CSS — Crawl all CSS on the page.
• uCSS — Crawl the website to identify unused CSS.

in conclusion

CSS is all around us and we need to consider it as first-class citizens of each project. What others think of your CSS isn't important, but what you think of it is really important. If your CSS is organized and well written, you will spend less time debugging it and more time developing new features. Ideally, we would educate everyone to write good CSS, but it takes time.

Make today the day when you start focusing on CSS code.

I know that CSS auditing is not an interesting thing for everyone. However, if you run your code with any of these tools and try to improve any part of the CSS code base, this article completes its task.

I've been paying more attention to CSS code lately and I'm working on getting more developers to write CSS code with more respect. I even started a new project at css-auditors.com (cheer for hyphenated domains!) that is dedicated to auditing CSS.

If you know of any other tools, please let me know in the comments.

The above is the detailed content of Tools for Auditing CSS. For more information, please follow other related articles on the PHP Chinese website!