Every Web Developer knows about them and everyone amongst them who cares about performance fears them. Unused zombie-like CSS selectors that were initially added to your CSS files (probably at an early stage of the project) with good intentions but became useless and redundant at some point, most likely because of changes in the markup. So these CSS selectors normally stay there, unless some intern gets hired to find them - cause a regular Web Developer has far more important things to do, right?
With the Dust-Me Selectors Firefox extension provided by SitePoint, there is a way out of this. The extension provides a convenient way of cleaning up your CSS file(s) and identifying selectors which are not used anymore.
After installation, the presence of the application is indicated by an icon in the browser bar showing a spiffy broom. The extension comes with several options. First, you can select that upon visiting a certain web site, it starts recording which CSS selectors from the CSS files loaded get actually used on the site you are on (indicated by an animated broom icon and listing the amount of unused selectors found in how many CSS files). It then creates a list and bit by bit ticking off every selector being used. While you continue browsing the site, that list (hopefully) gets smaller and after you have browsed through samples of significant pages on your site, it will give you a list of CSS selectors which - it thinks - are redundant and can be deleted.
With version 2.0, the clever guys at SitePoint (cause they know what we want) built a spider functionality into Dust-Me. This means that you can provide the extension with a sitemap of your site (either an HTML file with a list of links or a Sitemap XML file) and it will spider the pages provided (and going one level deep from there). From my perspective a more convenient way, if you have a tool that creates a site map like XML-Sitemaps.com Sitemap Generator or GSiteCrawler. There is even a Google (XML) Sitemaps Generator for WordPress.
The “view saved data” option in the plugin will then give you a nice list of used/unused selectors which will give you a sense of which selectors might be save to delete. I say might, because it does not check whether you might use one or the other CSS selector to style markup you insert via JavaScript into the page. This is beyond the scope of the plugin, so with the final output data from Dust-Me at hand, you will need to check whether one or the other applies to markup added using JavaScript — and then don’t delete them, of course
Utolsó kommentek