22

I have a site whose stylesheets are becoming overwhelming, and a full 50% to 90% or so is not used on certain pages. Rather than have 23 separate blocking CSS sheets, I'd like to find out which are being used on the page I'd like to target, and have those exported into one sheet.

I have seen several questions that recommend "Dust me selectors" or similar add on which will tell what selectors are and are not being used; but that's not what I want. I need to be able to export all used styles from all sheets for that particular page into one new sheet that can be used to replace the 23 others. The solution should be able to support a responsive website (media calls). The website page I'm targeting is: http://tripinary.com.

I've found: https://unused-css.com but this is a paid service and I need free;

The next closest thing I've come across is http://www.csstrashman.com/ but this does not look at stylesheets. In fact, it completely ignores them and ultimately I'm having trouble with the responsiveness of the site. Many times as well, this site just crashes.

I don't mind a programmatic solution if someone has had to do this before and can recommend a direction.

user658182
  • 2,148
  • 5
  • 21
  • 36
  • The bookmarklet solution I posted for [this question](http://stackoverflow.com/questions/4867005/extracting-only-the-css-used-in-a-specific-page) might meet your needs. The only step you'll need to take is paste the generated CSS into a new CSS file. – thdoan Mar 07 '17 at 05:22

6 Answers6

17

(deleted my comment to RwwL answer to make it a thorough answer)

UnCSS, whether node.js or as a grunt or gulp task, is able to list used CSS rules by an array of pages in an array of Media Queries.

uncss: https://github.com/giakki/uncss
grunt-uncss: https://github.com/addyosmani/grunt-uncss
gulp-uncss: https://github.com/ben-eb/gulp-uncss

Multipage:

You can pass files as an argument to any of the 3 plugins, like:

var files   = ['my', 'array', 'of', 'HTML', 'files'],
    options = { /* (…) */ };

uncss(files, options, function (error, output) {
    console.log(output);
});

Avoid:

urls (Array):
array of URLs to load with Phantom (on top of the files already passed if any).
NOTE: this feature is deprecated, you can pass URLs directly as arguments.

 
Media Queries and responsive are taken into account:

media (Array):
By default UnCSS processes only stylesheets with media query "all", "screen", and those without one. Specify here which others to include.

You can add stylesheets, ignore some of them, add inline CSS and many other options like htmlroot

 
Remaining problems:

1/ Conditional classes if you use them for IE9-. They obviously won't be matched in a WebKit PhantomJS environment! 

HTML:
<!--[if IE 9]><html class="ie9 lte-ie9" lang="en"><![endif]--> <!-- teh conditional comment/class -->

CSS:
.ie9 .some-class { property: value; ] /* Only matched in IE9, not WebKit PhantomJS */

Should they be added by hand or script to the html element in testing environment? (how it renders is of no importance)
Is there an option in uncss?
As long as you don't style with :not(.ie9) (weird), it should be fine.

EDIT: you can use the ignore option with a pattern to force uncss to "provide a list of selectors that should not be removed by UnCSS". Won't be tested though.

2/ Scripts that will detect resolution (viewport width) and adapt content to it by removing/adding it or adding a class on a container. They will execute in PhantomJS in desktop resolution I guess and thus won't do their job so you'll need to modify calls to PhantomJS or something like that... Or dig into options or GitHub issues of the 3 projects (I didn't)

Other tools I heard of, not tested or barely or couldn't test, no idea about the MQ part:

  • in grunt-uncss readme, the Coverage part
  • ucss from Opera (there's already an ansswer here, couldn't make it work)
  • Helium
  • CSSESS
  • mincss

Addy Osmani has countless presentations of 100+ slides presenting awesome tools like this one: https://speakerdeck.com/addyosmani/automating-front-end-workflow (you'll regret even more that days are made only of 24 hours and not 48 err wait 72 ^^)

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • To complete your awesome answer, I just found a free server side implementation of unCSS; it looks like a work in progress, but something worth keeping an eye on... http://uncss.io/ – NickNo Aug 17 '14 at 13:24
  • @bhavya_w If it can be displayed as an HTML page and accessed by a browser, it can be accessed by UnCSS. There's an underlying *headless* rendering engine in UnCSS (some WebKit through PhantomJS) and so the back-end technology of your server is irrelevant (PHP, JSP, whatever). It's like a browser accessing your server. The main difference is that nothing is displayed on your screen but it's somewhere in RAM. – FelipeAls Sep 01 '14 at 13:25
7

How about the CSS Usage plugin for Firebug?

Steps:

  1. Visit your page in Firefox
  2. Click "CSS Usage" tab in Firebug
  3. Click the Scan button
  4. Click the bold file name
  5. Save page of CSS selectors to disk

Here are some screen shots and walk through. Not sure about media queries or if it'll work on your site, and it'll probably not keep -webkit etc, but maybe it'll get you part of the way there.

bishop
  • 37,830
  • 11
  • 104
  • 139
  • This app seems to be 98% there. To the right of the filenames is "export cleaned css." When I export this, it doesn't remove the unused CSS, it appends UNUSED. to the beginning. It does seem to support media calls. But per 4. above you clicked on the bold name instead of export link, correct? From what I see, this still contains the unused css. Looks like if I want to used the exported css file I'll have to do some reg ex to pull out the items with "Unused" appended, right, or am I missing something? – user658182 Jul 18 '14 at 01:32
  • Post-processing with a CSS lexer would work, or you could modify the plug-in sourcce code to *not* write any CSS rule it concludes is unused. The latter approach seems like it might be universally faster for your use case, and I would suspect the code change would be very small (eg, like commenting out a conditional). – bishop Jul 19 '14 at 23:20
2

Opera Software released a CSS crawler on Github that claims it can find unused and duplicate selectors. It might do the trick if you're comfortable with a command-line tool. https://github.com/operasoftware/ucss

RwwL
  • 3,298
  • 1
  • 23
  • 24
  • Dust me selectors and even Chrome's developer tools can find unused selectors, but that's not what I'm looking. I need the solution to find all IDs and Classes that are in use on a single page, aggregate those css styles, and output them in a way that I can create one single CSS stylesheet that's used 100% on that page. The solution you suggest doesn't do that, but it did lead me to https://github.com/giakki/uncss. I'm still playing with it, but so far this doesn't feel like the solution either. If your solution does do what I need, please provide more details as to how to do it? – user658182 Jul 12 '14 at 02:01
  • Sorry, I've not used it, just knew of it. I understand the desire to avoid any manual work, but it isn't always possible, so I thought getting a list of unused & duplicate selectors for a whole site that you could manually remove might suit you, sorry if it doesn't. UnCSS certainly sounds closer to what you want. Since you seem to want separate CSS output for every page, just write a shell script that runs UnCSS once per page instead of once against the whole site. – RwwL Jul 12 '14 at 13:10
1

You Can Check in Google Chrome by doing inspect element (F12) . The unused CSS has Line over the tags.

Mayank Bothra
  • 93
  • 1
  • 1
  • 8
1

If you wanted, you could try to build a script that runs on a (non-production) server that goes through every css rule, removes it from the stylesheet, loads the page using something like phantomjs, and checks to see if anything changed from the last time it loaded the page. If so, then put the css rule back, if not, then leave it out and move on to the next rule. It would take a while to run, but it would work. You would also have to setup an instance of your server that does not use caching for it to run on.

Ari Porad
  • 2,834
  • 3
  • 33
  • 51
0

Try using this tool,which is just a simple js script https://github.com/shashwatsahai/CSSExtractor/ This tool helps in getting the CSS from a specific page listing all sources for active styles and save it to a JSON with source as key and rules as value. It loads all the CSS from the href links and tells all the styles applied from them You can modify the code to save all css into a .css file. Thereby combining all your css.

Shashwat Sahai
  • 11
  • 1
  • 2