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

Navigation
6

When developing large-scale sites or retaking projects of other people where there are hundreds or thousands of CSS style lines, it can become complicated to review and pass the code clean to remove unnecessary images and styles from classes and ids that does not even exist.

So my question is - is there any way or tool (other than console errors) for finding CSS code and unused images?

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

    
asked by anonymous 17.05.2015 / 08:14

2 answers

4

See these two plugins for firefox:

link

link

See this tool to remove unneeded styles: link

The Helium project in github can also help you a lot as it aims to remove unused CSSs. / p>     

17.05.2015 / 11:23
2

To complement and update the answer, other plugins

Plugin Helion

import the helion plugin for your site   link 

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

A textbox like this will appear justclickSTARTanditwillparsealltheCSSofyoursite.

Withthisyoucananalyzethat:

  • Greenselectorsarenotbeingused
  • Selectorsinblackarebeingused
  • Selectorsinbluecolorcouldnotbetestedbecausetheyonlyareactivatedwithsomeuseraction,sotestmanuallythen.
  • SelectorsintheredcolorarepoorlyformedanddamagingyourCSS,somakeamendsordeletethem.

ChromePlugin

installthe link

Another chrome plugin , not tested but interesting is: link

It displays all unused cSS and allows you to download a new CSS only with the items used, just replace yours. however as in the helium you should take care of the: hovers of life

    
02.12.2016 / 14:39
How to reduce the size of a variable passed via POST by compressing it JOIN with two columns in the same table