Here’s my current situation: I have a 3000+ line CSS document that I need to clean. I used both the CSS Usage and Dust-Me Selectors plugins for Firefox to track down all of the unused CSS on all pages on a single website. After exporting from CSS Usage, I now have a CSS document that has the word, “UNUSED” next to every single unused selector. There’s over 600 of them. Instead of spending countless hours manually going through and finding all of them, I’m wondering if there’s a faster way of removing all of the unwanted selectors by using the multiple cursor feature or by some other means.
For example, here’s a section of the CSS document:
.blog #content .blog-header,
.page-template-template-news-php #content .blog-header,
UNUSED.author #content .blog-header,
.category #content .blog-header,
UNUSED.date #content .blog-header,
UNUSED.tag #content .blog-header,
.tax-news_categories #content .blog-header {
margin-bottom: 20px;
color:#000;
}
UNUSED.single-post .entry h1,
.single-news .entry h1 {
margin-bottom: 5px;
color: #72898f;
font-family: 'Bitter', 'serif';
}
UNUSED.blog #content .blog-header h2,
UNUSED.page-template-template-news-php #content .blog-header h2,
UNUSED.author #content .blog-header h2,
.category #content .blog-header h2,
UNUSED.date #content .blog-header h2,
UNUSED.tag #content .blog-header h2,
.tax-news_categories #content .blog-header h2 {
color: #72898f;
font-family: 'Bitter', 'serif';
margin-bottom:25px;
}
Notice how not every single selector has the word “UNUSED” next to it. Any help would be greatly appreciated.