CSS auditing tools
Auditing (hereinafter, the word “audit” is used in the meaning of “quality assessment”) CSS is not related to everyday tasks when developing web applications, but sometimes you have to do it. This can be part of the process of identifying critical CSS, removing unused selectors, improving accessibility when all colors in the codebase are evaluated for contrast, etc.
There are some tools to help you accomplish these tasks. But let’s start with what is meant by “auditing” CSS.
CSS auditing is no easy task
Typically, evaluating the quality of a code includes analyzing it in search of bugs and other problems, such as performance problems. For most programming languages, the concept of code auditing is simple: it works or it doesn’t work. But CSS is a special language, most of whose errors are ignored by the browser. The same style can be applied in very different ways. This makes it difficult to audit CSS. And “complexity” is putting it mildly.
We can use extensions in our favorite code editor or some linter to find CSS problems. However, sometimes this is not enough. We will still be able to use too many colors, font definitions, or z-index, which will make CSS poorly maintainable and unstable.
For a true CSS audit, we need to dive much deeper in order to find blocks of code that are considered bad practice. To find such places, we can use the following tools.
Browser developer tools
Let’s take a look at the developer tools for CSS auditing provided by the browser Google Chrome…
There is a tool for manual CSS validation Inspect (arrow in the square in the upper left corner). With it, we can see the CSS applied to a specific element. And with the arrow, you can get detailed information about colors, fonts, size and availability.
Grid and Flex Inspector
Interface DevTools provides many interesting features, but my favorite is the Grid and Flex inspector. In order to enable it, you need to go to the settings (gear in the upper right corner), select “Experiments” and “Enable new CSS Flexbox debugging features”.
This tool can be used both to debug layout issues or simply to determine if a page is using CSS Grid or Flexbox.
CSS Overview
CSS Inspection provides basic information about the CSS used on a page. Let’s take a look at more advanced developer tools.
One such tool is the CSS Overview. To enable it, you need to go to the settings, select “Experiments” and “CSS Overview”. To open the CSS Overview panel, you can click Ctrl/Cmd+Shift+P, enter “css overview”, select “Show CSS Overview” and click “Capture overview”. This tool summarizes CSS properties such as colors, fonts, contrast issues, unused ads, and media queries. I usually use this tool to get a general idea of the quality of CSS. For example, if a page uses “50 shades of gray” or has too many font definitions, it may indicate that there is no style guide available.
Coverage panel
The Coverage tool shows the total and percentage of code used on the page. To start it, press Ctrl/Cmd+Shift+P, enter “coverage”, select “Show Coverage” and click on the update icon.
To filter CSS files, you need to enter “.css” in the “URL filter input”. Usually, I use this tool to understand the CSS techniques used on the site. For example, if I see a high degree of coverage, I can assume that the CSS file is being generated on a per-page basis. Sometimes it can also help determine the caching strategy used on the site.
Rendering panel
The Rendering panel is another useful tool. To use it, press again Ctrl/Cmd+Shift+P, enter “rendering”, select “Show Rendering”. This tool has many settings, but my favorites are the following:
- Paint flashing – shows green rectangles during redrawing. Can be used to identify areas that are taking too long to re-render
- Layout Shift Regions – shows blue rectangles when displacing (shifting) the layout. In order to get the most out of this setting, I set “Slow 3G” in the “Network” tab. Sometimes I record the screen and watch the video in slow motion to detect layout shifts
- Frame rendering stats – shows GPU and frame usage in real time. This setting helps detect animation and scrolling issues
I don’t use the tool in question very often, but it can sometimes be useful for identifying performance issues and the associated battery drain on a user’s device.
Other settings such as emulating and disabling certain features, enabling prefers-color-scheme or media type for printing or disabling local fonts are less useful in my opinion.
Developer tools help you understand what CSS features are used on a page, how effectively they are used, and what their impact on performance is. Of course, CSS auditing is far from limited to them.
Online tools
Specificity Visualizer
Specificity Visualizer shows the specificity of CSS selectors. To use it, just go to the site, insert the CSS and click “Visualize it!”.
The main graph shows the specificity depending on the location of the style sheet. The other two graphs show the correct use of specificity. I often use this tool to find “bad” selectors. For example, if I see a lot of red dots, then my code is not as good as I thought. Let’s analyze the main file with Habr styles:
CSS Specificity Graph Generator
CSS Specificity Graph Generator Is a similar tool for visualizing specificity. It shows a slightly different graph to help us determine how our selectors are organized in terms of specificity. A general rule of thumb is that selectors with more specificity in a stylesheet should appear later than selectors with less specificity.
CSS Stats
CSS Stats Is another tool for analyzing and visualizing style sheets.
All you need to do is enter the website address and click Enter… Information is divided into logical sections such as number of colors, fonts, z-index, specificity, etc. You can take a screenshot for later comparison.
Project wallace
One of the main features of Project Wallace is that it allows you to compare and visualize changes based on imports. This means that we can see the difference between the previous and current states of our CSS. This can be very useful for demonstrating improvements to the codebase.
CLI tools
Wallace
One of my favorite command line tools (interfaces) is Wallace… After installation, enter wallace and the name of the site. The terminal will display everything you need to know about the CSS used on the specified site. For example, you can see how many times it is used !important or how much id occurs in the code. Bad code is marked in red.
What I love about this tool is that it extracts all the CSS used on the site, i.e. not only from external files, but also embedded. This is why the CSS Stats and Wallace reports are not the same. Wallace requires Python to run.
csscss
CLI csscss shows which rules are distributed (shared). This can be useful for identifying duplicate code, thus eliminating such code by reducing the overall size of the codebase. For sites that use the correct caching mechanisms, this problem is not very relevant. Ruby is required for csscss to work.
Other useful tools
- Color sorter – sorts colors first by hue, then by saturation
- CSS Analyzer – parses a CSS string
- constyble – CSS complexity linter based on CSS Analyzer
- Extract CSS – getting all the CSS used on the page
- Get CSS – an alternative to Extract CSS
- uCSS – definition of unused CSS
Conclusion
No web project is complete without CSS. Therefore, its quality should be given the utmost attention. It’s not as important what other people think of your CSS as what you yourself think of it. If your CSS is well written and well organized, you will spend less time debugging it and more time developing new features.
I understand that auditing CSS can be very boring and tedious. However, if you try at least one of the tools listed in this article, and this tool helps to make your CSS better, then my efforts were not in vain.
What CSS audit tools do you use in your work? Let me know in the comments.
Cloud servers from Macleod ideal for website development and hosting.
Register using the link above or by clicking on the banner and get a 10% discount for the first month of renting a server of any configuration!
