DevTools: A clever overview of all your CSS code
Last updated: 7th April 2023Introduction
Use the CSS Overview feature in DevTools to gain a high-level understanding of your CSS code. This information can help towards better design consistency, and can also help you address potential issues with excessive color and font style variance.
How to Use the CSS Overview Feature
- Access the CSS Overview feature: Press Command + Shift + P and search for, and select, CSS Overview.
- Capture an overview: Click on "Capture Overview" to gather metrics and statistics about your CSS code.
- Examine the overview: The overview displays useful information such as the number of elements, types of selectors, list of colors used, and their frequency, among other details.
Investigate Colors
Click on a color to see all elements using it, and click on an element to locate its position within the elements panel.
Identify Contrast Ratio Issues
The feature detects contrast ratio problems between foreground and background colors. Inspect the "Contrast Issues" section and address any identified issues.
Media Queries
The CSS Overview Panel shows you all your media query definitions. If there's too much variance, you might want to consider consolidating them for more maintainable CSS code.
Font Information
Similar to the media query section, excessive variation in font sizes on the page can indicate a code smell. Strive for fewer varying font sizes and styles to promote consistency. Implementing a design system can help you achieve this goal.