How to remove unused CSS but keep comments?


Tags: css,optimization,stylesheet,code-cleanup

Problem :

I know that this question has been asked multiple times already, but I still couldn't find a decent solution for my situation.

I have a huge CSS file, and about 50% of it is not being used at all in my current website. It also contains many valuable comments which I want to keep.

Due to the size of the CSS file, tools that can only identify the unused CSS definitions are not very helpful - I need a tool that can either change my unused definitions so I can apply regex to delete them afterwards, or delete the unused definitions for me, automatically.

CSS Usage does a great job changing all the unused definitions, and I can easily remove all of them with a regex - the problem is that CSS Usage also removes all the comments from my file, automatically.

How can I remove all the unused definitions in my CSS file but keep all the comments?



Solution :

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, "");


    CSS Howto..

    How would you replicate these boxes in CSS?

    How to have jquery add a panel inside a panel in Bootstrap v3

    how to animate .jpg image with CSS?

    How to place HTML elements over inline SVG

    Bootstrap How to make a responsive grid degradating in two steps?

    CSS: How to scale an image from the center instead of top-left

    How can I improve my webpage code to be scalable for smaller sizes?

    Color of links not always showing correctly

    How to make a slider with divs and variable width?

    How do I use icons from fontello in my css?

    How to target last 3 elements in a container using CSS :nth-last-child(n)?

    How to place elements on top of each other

    How do you work on your HTML and CSS in PLay! + intellij idea? [closed]

    JS/CSS. How do I force a child div to the bottom of it's parent div

    How to resize and float right a background image using css?

    how to load all css and js at a time in Cakephp

    how to avoid overlapping of text

    How to put a border on a triangle shape using css?

    How to calculate total size of all css,js and html pages separately uing shell script?

    How can I take just a part of CSS from other site's when using bootstrap?

    How to position css sprite play button within video image

    How to make a logo css slider?

    How to change the scroll-bar style in css [duplicate]

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    How to keep transparent radial background smooth in browsers other than Chrome?

    How to edit the CSS of a selector in Polymer 1.0

    How did overflow actually work here?

    Why does an absolutely positioned child expand container height and how to prevent this?

    JavaFX: How not to fill background outside the rounded borders of a Label within a ScrollingPane

    How to implement fade-in and other effects using CSS