Dev Tips: DevTools: Refactor your styles with CSS Overview

Dev Tips

 

DevTools: Refactor your stylesheets with CSS Overview


Introduction

The CSS Overview Panel provides interesting information on your CSS. You can view high-level CSS metrics which are especially useful when refactoring.
 

How to use this feature

Enable this feature:

  1. Enable CSS Overview from the DevTools Experiments pane (Cmd + Shift + P > Show Experiments)
  2. Select Show CSS Overview from the DevTools Command Menu (Cmd + Shift + P)


In the CSS Overview Panel, you can navigate to different sections:

  • Overview Summary - Interesting metrics on your CSS, such as number of elements, stylesheets, class vs ID selectors, complex selectors and more.
  • Colors - A visual preview of background colors, text colors, fill colors and border colors. The colors themselves are clickable, so you can view exactly which element(s) use such color.
  • Font info - Metrics on font usage and how often they appear within stylesheets. Includes font weight and line height metrics. Font metrics can be selected to reveal affected elements.
  • Unused declarations - Unused CSS declarations, which can be clicked on as usual.
  • Media queries - Details of CSS media queries (such as min/max-width values) and how often they occur in stylesheets. You can click on these to jump straight to the Sources Panel. If you have source maps enabled, you'll be able to see the original styles, such as Sass.


When to use this feature

Use this when refactoring your code, or normalising brand styles across pages. For example, if you notice slight variations of a "primary" color scattered around your CSS, this Colors pane in the Overview panel is a great place to identify such a thing.

You can also use the Media queries pane within the CSS Overview Panel to check you are targeting the expected set of media query breakpoints and ensuring your pages look good on a variety of screen dimensions.

The Unused declarations pane may help improve the network and render performance by informing you which CSS can be removed.

Finally, you can use the CSS Overview panel to communicate information to the rest of your front-end team, especially new starters, on the state of the CSS code, including areas which may need focussing upon.


Extra

  • While the CSS Overview Panel can provide valuable metrics on CSS, the Lighthouse Panel provides metrics on your whole site, including JavaScript. I wrote about it in this article What’s New in DevTools 2020.
  • In addition to the article above, I've also written a guide to using Lighthouse to debug accessibility. Check it out: Accessibility In DevTools.

View the web version of this post: umaar.com/dev-tips/240-css-overview-improved
Email Marketing Powered by Mailchimp

Copyright © 2020 Umar, All rights reserved.
You are receiving this email because you signed up for Dev Tips.

unsubscribe from this list    update subscription preferences 

Older messages

Dev Tips: DevTools: Create your own keyboard shortcuts  ⌨️

Friday, November 13, 2020

The Shortcut Editor lets you assign your own preferred keyboard shortcuts to common workflows. Dev Tips DevTools: Create your own keyboard shortcuts ⌨️ Introduction The DevTools Shortcut Editor lets

Dev Tips: DevTools: The New Media Panel  🎬

Wednesday, November 4, 2020

The Media Panel in DevTools provides useful video inspection tools, useful for debugging, understanding, and learning about video. Dev Tips DevTools: The New Media Panel 🎬 I've written an article

Dev Tips: DevTools: CSS Grid Inspection ✨

Wednesday, October 28, 2020

Dev Tips DevTools: CSS Grid Inspection ✨ Hey everyone! I took a little break, but I'm back and I've got some great tips to share with you over the next few weeks! Introduction CSS Grid

Dev Tips: DevTools: Accessible colour suggestions  🎨

Friday, September 4, 2020

Get accessible colour suggestions for low contrast text Dev Tips DevTools: Accessible colour suggestions I'll be doing an AMA in a few hours! Feel free to ask anything you're curious about!

A few updates from me ⭐️

Friday, August 28, 2020

Updates from me, including new blog posts, and information on my courses A few updates from me ⭐️ Hi there! I send ~5 personal emails a year. In this one, I have useful content to share with you! But

You Might Also Like

Charted | Global Economic Confidence in 2025, by Country 🌎

Wednesday, December 25, 2024

While emerging markets in Asia have the strongest confidence in the global economy looking ahead, European countries are most pessimistic. View Online | Subscribe | Download Our App FEATURED STORY

Top Tech Deals 🎅 Sony Headphones, iPhone Cases, 4K Projector, and More!

Wednesday, December 25, 2024

The season of giving is upon us. How-To Geek Logo December 25, 2024 Top Tech Deals: Sony Headphones, iPhone Cases, 4K Projector, and More! The season of giving is upon us. Happy Holidays! If you're

Why the Race to AGI is Humanitys Defining Moment

Wednesday, December 25, 2024

Top Tech Content sent at Noon! Boost Your Article on HackerNoon for $159.99! Read this email in your browser How are you, @newsletterest1? 🪐 What's happening in tech today, December 25, 2024? The

Iran's Charming Kitten Deploys BellaCPP: A New C++ Variant of BellaCiao Malware

Wednesday, December 25, 2024

THN Daily Updates Newsletter cover The Data Science Handbook, 2nd Edition ($60.00 Value) FREE for a Limited Time Practical, accessible guide to becoming a data scientist, updated to include the latest

Software Testing Weekly - Issue 251

Wednesday, December 25, 2024

GitHub Copilot is free! 🤖 View on the Web Archives ISSUE 251 December 25th 2024 COMMENT Welcome to the 251st issue! In case you missed it — GitHub Copilot is free! The free version works with Visual

Daily Coding Problem: Problem #1647 [Medium]

Tuesday, December 24, 2024

Daily Coding Problem Good morning! Here's your coding interview problem for today. This problem was asked by Square. In front of you is a row of N coins, with values v 1 , v 1 , ..., v n . You are

Sentiment Analysis, Topological Sort, Web Security, and More

Tuesday, December 24, 2024

Exploring Modern Sentiment Analysis Approaches in Python #661 – DECEMBER 24, 2024 VIEW IN BROWSER The PyCoder's Weekly Logo Exploring Modern Sentiment Analysis Approaches in Python What are the

🤫 Do Not Disturb Mode Is My Secret to Sanity — 8 Gadgets I Want To See Nintendo Make

Tuesday, December 24, 2024

Also: The Best Christmas Movies to Watch on Netflix, and More! How-To Geek Logo December 24, 2024 Did You Know Their association with the Christmas season might make you think poinsettias hail from a

😱 AzureEdge.net DNS Retiring Jan. 2025, 🚀 Microsoft Phi-4 AI Outperforms, 🔒 Microsoft Secure Future Initiative

Tuesday, December 24, 2024

Blog | Advertise | View Online Your trusted source for Cloud, AI and DevOps guidance with industry expert Chris Pietschmann! Phi-4: Microsoft's New Small Language Model Outperforms Giants in AI

Mapped | The Top Health Insurance Companies by State 🏥

Tuesday, December 24, 2024

In 13 US states, a single company dominates the health insurance market, holding at least half of the total market share. View Online | Subscribe | Download Our App Presented by: Global X ETFs Power