Detect Unused CSS Rules

Detect unused CSS rules

You can get a general idea with chrome's developer tools.

1. Open the page in Chrome
2. Open developer tools (Ctrl+Shift+I)
3. Open the Audits tab
4. click run
5. expand the "Remove unused CSS rules" item to view a list of style sheets that contain unused style rules.

This doesn't list them out oh wait... it does... XD

Find unused css

I've been looking for a while, and the best thing I found was this:

http://unused-css.com/

They scan your site and email you the result css.

I am aware you are working on a localsite, however if you find no alternative, you can upload your site somewhere and use this

Alternatively

You could install a previous version of firefox that is compatible with dust-me selectors and run it along side your current installation of firefox.

How can I detect unused CSS on my website, across all pages?

Sorry for the late answer, I've found your question when searching for the same thing. Anyway you might be interested by :

https://purifycss.online/.

It removes unused css and you can add multiple urls.

Good luck

PS: I'm editing my answer because I found another website doing the unused CSS removal, maybe it will help someone reading this.

Is it worth removing unused CSS?

Is it worth removing unused CSS rules?

I would say yes. To have any unused code in your production build is not cool .

However, unless something has gone very wrong, it is highly unlikley that your CSS is the reason for slow page loads, in fact the impact of loading a couple pages of unused css rules will be almost neglible. It's more likley to be images/ media, or maybe scripts.

You should probably investigate whats slowing down your page. Have a look in the network tab of your dev tools to start debugging why page load is slow, Google Page Load Insights may also help. Have a look at this blog series, about speeding up your web apps too.

If you've not done so already you should probably minify and bundle your CSS and JS for production also.

---

How to find and remove unused CSS rules

Removing unused CSS is a common task, and there are a lot of packages and tools out there which make it strait-forward. There are several options, going forwards:

1. Manually remove unused CSS.

If your app is still quite small, this will probably be the easiest approach.

1. Open Chrome DevTools
2. Open the command menu with: cmd + shift + p
3. Type in “Coverage” and click on the “Show Coverage” option
4. Select a CSS file from the Coverage tab which will open the file up in the Sources tab

Source: Google Developer, Chrome 59

2. Use an online tool

There are tools out there, where you can just feed it a link to your site, and it will search and find unused CSS. The drawback here, is that this won't work locally.

• The best tool available it probably UnusedCSS, however it only
  allows you to do one site for free.
• UnCSS it totally free, but not as comprehensive.
• PureifyCSS is also good, and free.

3. Automate CSS removal

uncss allows you to automate unused CSS removal, either at built-time, or complile-time. It also works with Grunt and Babel.

---

A word of warning, some of your CSS might be detected as unused, when actually you are using it later on, such as when a request has finished loading. Be sure not to delete classes that are indirectly used.

Edit:

Be careful when using coverage for CSS usage, it considers media
queries, hover effects and others as useless since they're not applied
when loading your page

See also: https://css-tricks.com/unused/

Is there a tool that tells me if I have unused CSS classes?

Chrome Devtools has a coverage tab which can locate unused CSS and JS.

Each line of code is color-coded:

• Solid green means that line of code executed.

• Solid red means it did not execute.

• A line of code that is both red and green, such as line 3 in Figure 2, means that only some code on that line executed. For
  example, a ternary expression like var b = (a > 0) ? a : 0 is
  colored both red and green.

Removing unused CSS from website code

You can get pretty close to what you are asking for with the Google Chrome's Audit tab under Developer Tools. It does not remove unused CSS, but it will show you what CSS rules are not being used.

Observe:

---

Related Topics