1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

My CSS has become morbidly obese

Discussion in 'CSS' started by NewComputer, Feb 3, 2005.

  1. #1
    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.
    SEMrush
     
    NewComputer, Feb 3, 2005 IP
    SEMrush
  2. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Dji-man, Feb 3, 2005 IP
  3. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #3
    • 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.
     
    J.D., Feb 3, 2005 IP
  4. HHI Golf Guy

    HHI Golf Guy Guest

    Messages:
    86
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    HHI Golf Guy, Feb 3, 2005 IP
  5. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    64
    Best Answers:
    0
    Trophy Points:
    0
    #5
    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.
     
    J.D., Feb 3, 2005 IP
  6. Dji-man

    Dji-man Peon

    Messages:
    185
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Dji-man, Feb 4, 2005 IP