Kryptix Posted December 24, 2011 Share Posted December 24, 2011 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? Quote Link to comment https://forums.phpfreaks.com/topic/253786-find-out-unneeded-css/ Share on other sites More sharing options...
scootstah Posted December 24, 2011 Share Posted December 24, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/253786-find-out-unneeded-css/#findComment-1301082 Share on other sites More sharing options...
Sharpie Posted January 12, 2012 Share Posted January 12, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/253786-find-out-unneeded-css/#findComment-1306778 Share on other sites More sharing options...
baccarak Posted January 26, 2012 Share Posted January 26, 2012 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. Quote Link to comment https://forums.phpfreaks.com/topic/253786-find-out-unneeded-css/#findComment-1311447 Share on other sites More sharing options...
baccarak Posted January 26, 2012 Share Posted January 26, 2012 just to mention that the 'Change' css is significantly smaller and easier to edit and update Quote Link to comment https://forums.phpfreaks.com/topic/253786-find-out-unneeded-css/#findComment-1311461 Share on other sites More sharing options...
scootstah Posted January 26, 2012 Share Posted January 26, 2012 Interesting approach. But I'm glad I'll never have to debug that. Quote Link to comment https://forums.phpfreaks.com/topic/253786-find-out-unneeded-css/#findComment-1311494 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.