Finding unused css
> Over time as a site gets modified and adapted parts get removed parts
get added and the CSS accumulates a bunch of old CSS rules that just
aren't used any more.
Its always easier to to leave some rule that you aren't sure does something just in case its active in some dark corner of the site you have forgotten about.
It tends to look worse I you picked up the site from someone else and whatever thought was involved in creating the site originally has gone walk about.
Been looking for tools to help identify the unused CSS recently found a browser plugin called Dust-Me Selectors (https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/?src=userprofile) and a node tool called uncss (https://github.com/giakki/uncss) both of which you point at a site to get an idea of the amount of css that is dormant plus in case of uncss a lot more.
I found the first helped me more on site was trying to analyse as I was doing it over multiple pages, however its only a starting point of places to look and helped me to reduce the un minified CSS from about 172 kb to 127 kb. I had around 1031 unused selectors and 983 selectors (yes the site is a mess) which was a bit of an exaggeration due to some pages not checked also there are some framework css selectors which might be used in the future but aren't currently. I managed to reduce the number of selectors by 270 ish at a first pass which is better than nothing.
Its a dreary and uninteresting process but if you need to save on file size and I guess rendering time in the browser its probably necessary.
Its always easier to to leave some rule that you aren't sure does something just in case its active in some dark corner of the site you have forgotten about.
It tends to look worse I you picked up the site from someone else and whatever thought was involved in creating the site originally has gone walk about.
Been looking for tools to help identify the unused CSS recently found a browser plugin called Dust-Me Selectors (https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/?src=userprofile) and a node tool called uncss (https://github.com/giakki/uncss) both of which you point at a site to get an idea of the amount of css that is dormant plus in case of uncss a lot more.
I found the first helped me more on site was trying to analyse as I was doing it over multiple pages, however its only a starting point of places to look and helped me to reduce the un minified CSS from about 172 kb to 127 kb. I had around 1031 unused selectors and 983 selectors (yes the site is a mess) which was a bit of an exaggeration due to some pages not checked also there are some framework css selectors which might be used in the future but aren't currently. I managed to reduce the number of selectors by 270 ish at a first pass which is better than nothing.
Its a dreary and uninteresting process but if you need to save on file size and I guess rendering time in the browser its probably necessary.
/ Adam