Jump to content

Recommended Posts

  • 3 weeks later...
  • 2 weeks later...

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.