My CSS has become morbidly obese

How large do your style sheets get as far as size and different Id's etc... I am sure I could shorthand or use some cuts, but my latest is right out of hand.

 

I know what it's like, mine used to be 2 miles long I have a "how to put your CSS on a diet" guide at work. I'll send you the link tomorrow.

 

• use shorthand properties where possible (e.g. margin: 0 5px;)
• don't specify explicitly those properties that are inherited anyway (e.g. font-size may be inherited)
• break up your large CSS file onto a few smaller ones (e.g. one generic for the entire website and one for the shopping cart, etc)
• defined page-specific styles in the page header (i.e. those that are never used anywhere else)
• use descendant selectors where possible (e.g. div.s1 h1 {...} instead of h1.ds1 {...})
• you can combine classes (e.g. div.s1 {...} and div.s2 {...} can be used in the same div as <div class="s1 s2">...</div>)
• same properties can be assigned to multiple selectors (e.g. div.s1, div.s2 {...})

J.D.

 

Style sheets can also get cluttered when you want a different look and feel of basic elements from one page to another, even when the actual HTML structure remains the same. For example, let's say you have a <div id="header1"> that contains a background image on page1.

Page2 has the exact same layout as page1, but the background image is different. What I see some people do is change the HTML page from <div id="header1"> to <div id="header2"> and then add the corresponding CSS for the second image to their style sheet.

A better alternative is to create a second style sheet with only the header1 info that needs to change. On your HTML page load your main CSS file first, then load the smaller CSS file that contains only the information that needs to be changed. The elements of the second style sheet will override elements of the first style sheet. Be sure that you load them in the correct order!

Using this method, the naming convention of your div tags can remain the same throughout all of the pages on your site.

Here's an example: Go to http://www.hiltonheadarealuxuryhomes.com/colleton-river.htm. The CSS file for this page is "main1.css". Now go to http://www.hiltonheadarealuxuryhomes.com/beach-rules.htm. This page first loads "main1.css", then loads "main4.css" to change the image and a few style elements.

The end result is that you don't need 14 different div names for the same area over different pages. You can also use secondary CSS files to include elements that are only specific to that page, and not other pages.

 

Good point. Along the same lines, sometimes it helps to use the style attribute directly in the HTML element that needs to be slightly different. Because this creates a certain level of duplication, this technique works better when combined with SSI.

J.D.

 

Here's the "writing efficient css" guide from position is everything.
http://www.positioniseverything.net/articles/efficientcss.html

It is the same as what JD says, but in 8 pages...

Good luck!