From the course: CSS: Refactoring Style Sheets

Unlock the full course today

Join today to access over 22,500 courses taught by industry experts or purchase this course individually.

Audit unused CSS with Chrome

Audit unused CSS with Chrome - CSS Tutorial

From the course: CSS: Refactoring Style Sheets

Start my 1-month free trial

Audit unused CSS with Chrome

“

- [Instructor] In any project there's a good chance there are some unused CSS rules, and this is especially true when we rely on a framework or other third party CSS, as is the case here. In this project right now, we have three style sheets. First the Google Fonts style sheet where I specify exactly which font families and fonts weights I want. So we can assume as long as I've done my job here that this is a correct style sheet, and we don't have any style rules that are not in use. The second one is the full Bootstrap style sheet that's sent over in a minified version, and this one I have zero control over, but there's a good chance I'm not using everything that's in that style sheet. And then finally, I have my custom style sheet, style.css that we've been working with so far over here, that I have full control over. The question of course is, how do I know which of these rules are actually being used and which rules are just wasting data. Chrome has a tool to answer that exact…

Contents