How to Get Better Overview of Your CSS

Chrome’s DevTools is one of the most widely used tools for web development. It ships with all the essentials and often more. On their official developers’ website, you can find regular updates about what’s new in DevTools.

It is packed with so many features in fact, that some of them stay hidden waiting to be uncovered. In this post, however, we will not look into a long-forgotten feature that everybody should be using by now. Instead, we will see how a — still experimental — feature called “CSS Overview” can help you better understand your CSS.


What is CSS Overview?

CSS Overview is a new experimental feature in DevTools that — as the name suggests — gives you a better understanding of your CSS, so you can make optimizations.

The CSS Overview panel in DevTools

How to enable it?

As this is still in experimental phase, in order to use it, you need to enable it first. Open your DevTools and click on the gear icon to open the settings. (F1 or Shift + ?) Inside it, you will find a tab for experiments.

Enabling CSS Overview among the experiments

After enabling it, you may need to restart Chrome. Once reloaded, you can open up the tab, by hitting Ctrl + Shift + P to open up the Tools menu and start typing “CSS Overview”.

start typing css overview to open the css overview panel

You will be greeted with a screen to capture an overview of your CSS on your site.

capture CSS overview

What CSS Overview Can Be Used For?

Once you click on “Capture overview” a report will be generated for you that is divided into five different sections:

Overview summary

The overview sections shows you a summary of the different numbers: the number of elements on your page, the number of style rules, media queries, and the different types of selector.

the overview summary section

It gives you a hint about whether you have too many elements on the page, too many strong selectors — such as universal or ID — or whether you have complex selectors that can be simplified. Although as of now, you can’t see right away which selectors are flagged as “Non-simple selectors”, hopefully, this will change once the feature has been standardized.

Colors

It also gives you information about all colors used on the page. This is mostly useful for UX. If your site is using too many colors that are not closely related to each other, your color scheme might need some adjustment. Also using too many colors breaks the consistency of your design.

the colors section of CSS overview

Font info

The font info section gives you some information about your font usage. You want to stay away using too many different types of fonts — and different variants as well — again for keeping things consistent. Fonts are also heavy resources that slow down the load time of your website.

By clicking on the number of occurrences, it shows you where you have font-family declarations inside your code. This is useful for spotting duplications and removing unnecessary rules. You may also find font families that are no longer used on your site and their presence is only slowing your performance.

font usage and information section for CSS overview

Unused declarations

The next sections will be probably the most useful from all in terms of optimization. It shows you the number of unused style declarations and the reason why they are not needed. You may happen to find that you can get rid of a big portion of your styles without making a difference.

unused declarations section

Media queries

Last but not least, the Media queries sections show you the different types of @media queries used on your page. You can verify whether you only use a set of predefined media queries. And you may find rules that shouldn’t be there in the first place.

media queries section inside CSS overview

Summary

Although the CSS Overview feature has not been standardized yet, it already provides a wide range of useful information on where you can make optimizations to your CSS. And since this is still in experimental, I anticipate it will bring even more useful information to us down the road.

Have you already used experimental features in Chrome? What are your favorite ones? Let us know in the comments! Thank you for reading through, happy debugging!

Remove ads
Remove ads

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
🎉 Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.