How to Identify and Eliminate Unused CSS Styles from My Bloated Stylesheet

How do I identify and eliminate unused CSS styles from my bloated stylesheet?

CSS Usage is a great Firefox add-in. You can browse multiple pages and it will work out which rules haven't been used on any of them - so it is more accurate than a tool that scans a single page.

How to remove unused CSS but keep comments?

I can say i managed to do exactly what you are asking for, however it's not that neat!
in fact i modified on the extension code (i don't know if that's even acceptable round here :-D) but i know how to make you duplicate it :-) !

I commented this line in the extension code

/* CssUsage.js : 110 */
cssSource = cssSource.replace(/\/\*[\S\s]*?\*\//g, "");

It removes comments like /* this is a comment */

It gave me this output

anyway, if you want to duplicate this...

- download the extension (save to..)

- open the downloaded .xpi with any application like winrar

- edit chrome/content/cssusage/CssUsage.js and comment line 110

- drag it to firefox to reinstall

or just download this xpi and drag it to firefox to reinstall the extension!

maybe you can also try to make it remove the UNUSED lines using the regex you mentioned
cssSource = cssSource.replace(/your regex/g, "");

Unify page style-sheets from version to version and compare overrides

This tool helps out in combining stylesheets in a page. Get it here

Hide overridden styles in less (with Bootstrap)

When I have a project that requires enough customization to justify doing a separate build of the Bootstrap CSS, I just edit the LESS files directly so that none of the overridden rules would remain in the compiled version. Presuming git is being used, one can commit these edits to a separate branch from the master branch, and then when updates on Bootstrap come through, rebase those changes onto the tracking branch, then rebuild.

Your other option is to use some external tool to try and clean up the unreachable CSS afterward. (tools for that have been suggested elsewhere)

However, I also want to point out that for many Bootstrap projects, loading Bootstrap CSS from a popular CDN and then loading separate overrides from your own server works just fine. Those unused rules aren't going to kill you, and from my own experience the custom build is the exception, not the rule. I don't know your project, so it's really gotta be your call; just make sure the benefits outweigh the added work this will mean in terms of future maintenance.

Single huge .css file vs. multiple smaller specific .css files?

A CSS compiler like Sass or LESS is a great way to go. That way you'll be able to deliver a single, minimised CSS file for the site (which will be far smaller and faster than a normal single CSS source file), while maintaining the nicest development environment, with everything neatly split into components.

Sass and LESS have the added advantage of variables, nesting and other ways to make CSS easier to write and maintain. Highly, highly recommended. I personally use Sass (SCSS syntax) now, but used LESS previously. Both are great, with similar benefits. Once you've written CSS with a compiler, it's unlikely you'd want to do without one.

http://lesscss.org

http://sass-lang.com

If you don't want to mess around with Ruby, this LESS compiler for Mac is great:

http://incident57.com/less/

Or you could use CodeKit (by the same guys):

http://incident57.com/codekit/

WinLess is a Windows GUI for comipiling LESS

http://winless.org/

software that lists all the css selectors of a stylesheet

PHPStorm, Paid but nothing can beat it.

Is having secondary css style sheets a bad idea?

A lot of the times a website's <body> tag will have a class on it like...

<body class="about"> <!-- for the about page -->

<body class="home"> <!-- for the homepage -->

and so on. You can do something like this to target it on individual pages:

.button-upload {
  float: left; /* It's floated left most the time */
}

.about .button-upload {
  float: right; /* Not on the about page, though! */
}