10

I have a page that contains multiple stylesheets and a large majority of the styles in it aren't actually used in the page (deprecated etc). I would like to export a new stylesheet containing all styles on the page that are actually in use. Is there anyway to do this?

John Slegers
  • 45,213
  • 22
  • 199
  • 169
ThomasReggi
  • 55,053
  • 85
  • 237
  • 424
  • 1
    possible duplicate of [Is there a way to check which CSS styles are being used or not used on a web page?](http://stackoverflow.com/questions/4361007/is-there-a-way-to-check-which-css-styles-are-being-used-or-not-used-on-a-web-pag) – John Conde Apr 02 '13 at 17:13
  • 3
    I found that dupe by Googling your question word for word. – John Conde Apr 02 '13 at 17:13
  • this could be of help : http://stackoverflow.com/questions/2224154/find-unused-images-css-rules-js-script-blocks – Laurent S. Apr 02 '13 at 17:14
  • 1
    None of these are a valid solution they all focus on showing unused not **exporting used**. I have done my research. – ThomasReggi Apr 02 '13 at 17:28
  • Actually, i am not sure this would be a good idea, something like : javascript trigered selectors, contextual display, code conditional layout ... – Milche Patern Apr 02 '13 at 17:52
  • @MilchePatern good point, still interested in trying it out. – ThomasReggi Apr 02 '13 at 18:28

4 Answers4

6

I had this same issue, complicated by the fact that the pages I need to analyze are login-only, and for work, so I cannot provide my login to an external app (which is how unused-css.com crawls pages behind a login wall).

I found two Chrome extensions:

  1. CSS Remove and Combine
  2. unusedCSS

I only used the first, as it did the trick nicely. It counted CSS elements on the page, told me how many were used and unused, and let me download a stylesheet of all used elements. It did not seem to include functionality for browsing around a site and accumulating seen elements, it was just on a page-by-page basis, but it still let me prune 450 down to 150.

user2615861
  • 121
  • 1
  • 3
  • https://extpose.com/ext/10145 - delisted ?? ; https://github.com/genintho/unusedCSS ; http://web.archive.org/web/20170222113001/https://www.bleachcss.com/ – Jan May 15 '23 at 05:49
3

I think this website does what you want: CSS Trashman. It takes a little while to run, but it works. It reduced my personal site's CSS from 3.31 KB to 402 Bytes.

If you would rather use a command-line tool, CSS Rationator powers CSS Trashman.

Jim Koppen
  • 46
  • 3
  • 2
    http://www.csstrashman.com/ only redirects to https://github.com/begriffs/css-ratiocinator Date: 2015-04-02 – Avatar Apr 02 '15 at 12:55
  • I was looking for the same thing and i came up with a small javascript to do this. You can check it out at https://github.com/mocanuga/unusedCSS – mocanuga Dec 18 '16 at 14:08
  • @mocanuga How are we supposed to use that? – Jordan Oct 03 '17 at 20:32
  • Just create a bookmark and paste the code in the href field. Then you go to the website you want to get the css, and click the bookmark you created. – mocanuga Apr 14 '22 at 22:59
2

In the Chrome DevTools, there is an Audits tab that will allow you to run a Web Page Performance audit and see a list of unused CSS rules :

enter image description here

Community
  • 1
  • 1
John Slegers
  • 45,213
  • 22
  • 199
  • 169
1

I found this : http://unused-css.com/

Features

  • Explore the pages of your site automatically, find the unused CSS selectors and create new clean CSS files you can download
  • Authenticate and explore the pages requiring authentication. It will then check unused CSS rules.
  • Search for CSS rules in javascript files
  • Customize the list of CSS selectors to keep
  • Preview the change made to the CSS file
  • Follow CSS import commands
  • Set a user agent for the crawler

But i am not sure this would be a good idea, something like : javascript trigered selectors, contextual display, code conditional layout ... So, be carefull if you attempt to 'batch' work your .css files.

Milche Patern
  • 19,632
  • 6
  • 35
  • 52