How to find CSS images and styles that are not used on a website?

Asked

Viewed 2,295 times

6

When developing large-scale websites or resuming other people’s projects where there are hundreds or thousands of lines of CSS styles, it can become complicated to review and clear code to remove unnecessary images and styles classes and ids that don’t even exist.

So my question is - is there any way or tool (other than console errors) to find CSS code and images that are not used?

There must be some way to go through all the files on a site and see which styles and images are not loaded.

html css

2 answers

4


2

To complement and update the response, other plugins

Helion plugin

import the Helion plugin to your website https://github.com/geuis/helium-css

<script type="text/javascript" src="helium.js" onload="helium.init()" async></script>

A textbox like this will appear inserir a descrição da imagem aqui just click on START and it will scan all the CSS on your site.

With this you can analyze that :

  • Green selectors are not being used
  • Black selectors are being used
  • Selectors in blue color, could not be tested due to them only are activated with some user action, so test manually afterward.
  • Selectors in red color are poorly formed and damaging your CSS, so make correction or delete them. inserir a descrição da imagem aqui

Chrome Plugin

install the https://chrome.google.com/webstore/detail/unusedcss/dokggbghedajooenkgjbamikfgnngeik

Another Chrome plugin, untested but interesting is: https://chrome.google.com/webstore/detail/css-remove-and-combine/cdfmaaeapjmacolkojefhfollmphonoh

It displays all the unused css and makes it possible to download a new CSS with only the items used, simply replacing yours. but as in Helion should beware of the : hovers of life

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.