What Is a Good CSS Cleanup Tool

What is a good CSS cleanup tool?

I always run messy CSS through this online tool. It works wonders for unformatted CSS.

Tool for cleaning up CSS?

You can try CSS Tidy:

http://csstidy.sourceforge.net/

It is simple yet effective.

How can I effectively clean up styles in a large web site?

Short of going through each .tpl file and searching the file for the selectors manually, I don't see any other way.

You could of course use Dust-Me selectors, but you'd still have to go through each page that uses the .tpl files (not each url as I know that many of them will be duplicates).

Sounds like a big job! I had to do it once before and I did exactly that, took me a week.

---

Another tool is a Firebug plugin called CSS Usage. As far as I read it can work across multiple pages but might break if used site-wide. Give it a go.

---

Triumph! Check out the Unused CSS online tool. Type your index url into the field and voila, a few minutees later a list of all the used selectors :) I know you want the unused ones, but then the only work is finding the unused ones in the file (ctrl+f) and removing them :)

Make sure to use the 2nd option, they'll email you the results of the crawl of your entire webpage. Might take up to half an hour, but that's far better than a week. Take some coffee :)

Just tested it, works a treat :)

CSS rule cleanup tool

It is a tricky task... especially if your HTML DOM content is generated on the fly in any way.

The Dust-Me-Selectors plugin is helpful, but on a page-by-page basis, lots of selectors will be unused... but not necs be invalid.

There's a few tricks I've used to help clean up.

One by one, insert some HORRID styling that you'll be able to spot immediately to determine if a selector is being used. e.g.

border:6px dashed #ffaacc;
padding:12px;

Anything that renders with a huge dashed hot pink border now... is an "active" selector. If you can surf most of your site/app without seeing it, then it is likely "dead".

(if your CSS code is "generated" you can optimize this to test with various colors at once, AND use generated content to prepend the "id" of the selector)

Another option if you use a generated CSS system... is to add a final property to your selector that sets say... a background image with a generated URL. e.g.

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

Then you simply surf your site/app for a while then check your web log for HTTP image requests... for any generated image URL that wasn't requested in the log... you've likely found a "dead" selector.

Is it worth removing unused CSS?

Is it worth removing unused CSS rules?

I would say yes. To have any unused code in your production build is not cool .

However, unless something has gone very wrong, it is highly unlikley that your CSS is the reason for slow page loads, in fact the impact of loading a couple pages of unused css rules will be almost neglible. It's more likley to be images/ media, or maybe scripts.

You should probably investigate whats slowing down your page. Have a look in the network tab of your dev tools to start debugging why page load is slow, Google Page Load Insights may also help. Have a look at this blog series, about speeding up your web apps too.

If you've not done so already you should probably minify and bundle your CSS and JS for production also.

---

How to find and remove unused CSS rules

Removing unused CSS is a common task, and there are a lot of packages and tools out there which make it strait-forward. There are several options, going forwards:

1. Manually remove unused CSS.

If your app is still quite small, this will probably be the easiest approach.

1. Open Chrome DevTools
2. Open the command menu with: cmd + shift + p
3. Type in “Coverage” and click on the “Show Coverage” option
4. Select a CSS file from the Coverage tab which will open the file up in the Sources tab

Source: Google Developer, Chrome 59

2. Use an online tool

There are tools out there, where you can just feed it a link to your site, and it will search and find unused CSS. The drawback here, is that this won't work locally.

• The best tool available it probably UnusedCSS, however it only
  allows you to do one site for free.
• UnCSS it totally free, but not as comprehensive.
• PureifyCSS is also good, and free.

3. Automate CSS removal

uncss allows you to automate unused CSS removal, either at built-time, or complile-time. It also works with Grunt and Babel.

---

A word of warning, some of your CSS might be detected as unused, when actually you are using it later on, such as when a request has finished loading. Be sure not to delete classes that are indirectly used.

Edit:

Be careful when using coverage for CSS usage, it considers media
queries, hover effects and others as useless since they're not applied
when loading your page

See also: https://css-tricks.com/unused/

Unused css - how do you clean it up?

Check out uCSS library from Opera Software.

It helps you to find unused CSS, as well as duplicate CSS. Also, you can get an overview of how many times each rule has been used in your markup. Several options are available by setting up a config file.

Update:

Another great alternative: csscss.

Written in Ruby and supports SASS, Less.

Update:

Another great alternative: uncss.

It works across multiple files and supports Javascript-injected CSS.

---

Related Topics