SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast BeauCreative's Avatar
    Join Date
    Oct 2004
    Location
    Michigan
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping large sites organized?

    I have come to the conclusion that it is much easier to maintain a large site that uses css for design rather than messy tables, but this brings rise to another question. How do you keep all of your css information organized? It seems to me that for a large site you are going to need tons of "#ids" in your css code in order to position everything correctly.

    So... what methods do you all use to limit your css coding for a site and to keep it neatly organized?
    BeauCreative Web Development
    FotoFight Photography Contests
    Engolfed - Link Exchange? Write for us? PM Me.
    datingUpdate | BiographyCollection - Link Exchange? PM Me.

  2. #2
    SitePoint Wizard bronze trophy JRMillion's Avatar
    Join Date
    Apr 2004
    Location
    Arlington VA
    Posts
    2,094
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well you could separate css classes etc into a couple different css files....
    you can also try to make the code as clean as possible by having styles inherit properties for other styles to avoid repeating things (font names, colors) for example... and also making changes easier.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    JRMillion is right on the money. Keep your selectors simple, use CSS shorthand, avoid repeating rules, and use inheritance whenever possible. You can definitely reduce the amount of extra classes/IDs to very low amounts with this method (kind of like database normalization), though you might have to add some of this stuff in for other purposes like scripting (kind of like doing some denormalization on a database ).

  4. #4
    I'm in your computer! Halo-13's Avatar
    Join Date
    Jun 2004
    Location
    Minneapolis, MN
    Posts
    168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can also use comment tags to split things up. For example, I use something like
    Code:
    /* Home Page */  << comment tag
    #ID {
       margin: ...
    }
    when I know that I am going to be using a lot of tags that will be used only on a certain page.
    Halo-13 Network
    ArcadeApe

  5. #5
    The MacGyver of Design bronze trophy Johan Dahlström's Avatar
    Join Date
    Oct 2004
    Location
    Uppsala, Sweden
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The other guys are already at it. But this goes for pretty much all programming I think, keep it simple. Separate instead of crazy bundling in one file, write comments and make it easy to find the part of the code that you're looking for. However, the way to accomplish this is another issue, just choose the way that you're most comfortable with. But be consistent and stick to one way, otherwise you'll just end up confused again.

  6. #6
    Beer Monster -Ox's Avatar
    Join Date
    Apr 2003
    Location
    sowth afreeka
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have a really long winded and LOADS of lines of code, and you think that you are going to loose your structure easily, then I find it usefull to comment my structure also. When I have a PHP page that is 5000 lines, I comment it like this;

    PHP Code:
    <?php
       
    if ($something) { // Start If statement
     
          
    $do_something
     
       
    }// End If statement
     
       
    else {
          
    $do_something_else
       
    }
     
    ?>
    That is a basic example, but I use the same principal when srtufting my templates in XHTML.
    HTML Code:
     <body>
       <!-- Start Container DIV -->
       <div id="container">
     
     	<! Start Left Column -->
     	<div id="left">
     
     	</div>
     	<!-- End Right Column -->
     
       </div>
     <!-- End Container DIV -->
     </body>
    etc etc it just helps me know where I start and finish things.

    Also as everyone has suggested, the separate style sheets I personally make one "main" style sheet and then @import all the others into that.

    /Ox
    My postings are a natural product.
    The slight variations in spelling and grammar enhance its
    individual character and beauty and in no way are to be
    considered flaws or defects - http://www.guinnesspig.net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •