Find out unneeded CSS?

[Kryptix]

Is there a program or anything that will go through a CSS file and tidy it up? Like, I think I've added stuff that isn't needed or could be done with less code. Is this a manual process or does anyone know of a way?

[scootstah]

Try this: http://unused-css.com/

 

But keep in mind that if you have pages or content that aren't visible to the public and they use styles that aren't used anywhere else, you may get some unexpected results.

[Sharpie]

I'm unfamiliar with:

Try this: http://unused-css.com/

 

So I use firebug to help isolate useless/repeat snippets of CSS, whenever you inspect an element - firebug will inform you of any repeat definitions by striking it out in the righthand code-view window.

[baccarak]

Try this: http://unused-css.com/

 

But keep in mind that if you have pages or content that aren't visible to the public and they use styles that aren't used anywhere else, you may get some unexpected results.

 

This is a problem I had. The way I do it now is have 2 stylesheets:

1 Master css with all styles I need for any site - mine is 8kb

2 Change css that has a list of all the variables I change from site to site

 

The Master uses multiplicity styles , this is an example for panel widths for all panel combos for a 960px width with padding site:

 

.p20{width: 185px;}.p25 {width:233px;}.p33{width:312px;}.p40{width:376px;}.p50{width: 470px;}.p60{width: 566px;}.p66{width:629px;}.p75 {width: 709px;}.p80 {width: 757px;}.p100{width:945px;}.p100m{width:100%;} .p20,.p25,.p33,.p40,.p50,.p60,.p66,.p75,.p80,.p100{float: left;margin-left:5px;}

as you see I do not have to put float: left;margin-left:5px; for every element and cuts loads of coding - bear in mind that this short code covers 27 different layout combinations! with just 2 lines of code.

 

here is another:

 

.acc-hh,.ah,.ac,#pna,#cont,#logo,.btn1,.btn2,.btn3,.btn4,.btn5,.pnav,#snav,#tags,.tag,.tags li{background-repeat:repeat-x} that has saved coding 15  more times!!! ie:

 

background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x background-repeat:repeat-x

 

NOTE that i use short names for my ids and classes  - usually no more that 4 ;-)

 

also being selective I can add a mixture of upto 3 styles to 1 element  - you can add 2 classes to 1 element!!

 

ie

 

<div id="news" class="wht r10""></div>  - I have a unique div called news (newsfeed) that has a white background (wht) and rounded corners of 10 pixels (r10) then news id can have additional styles  - if it has a background-repeat:repeat-x  add #news to your list for the background-repeat:repeat-x  element

 

rounded corners code in css3 = -moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px so if you have ,say just 6 divs on your site using rounded corners of 10 pixels, you are saving this much in code

 

-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px

 

using this technique with common terms such as background-repeat:repeat-x has streamlined my css by 60% and also gives me more style options too. Also remeber your Master css has your tried and tested styles so you never have to touch it again only to add additional styles. Rememer - if certain divs (for example) is going to change a lot through the site - ie background image is unique add to just this part to your Change css  - if it has a background-repeat:repeat-x add that div to that element.

[baccarak]

just to mention that the 'Change' css is significantly smaller and easier to edit and update

[scootstah]

Interesting approach. But I'm glad I'll never have to debug that.