SitePoint.com

BeauCreative · Nov 1, 2004, 13:39

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?

JRMillion · Nov 1, 2004, 13:44

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.

vgarcia · Nov 1, 2004, 13:48

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

).

Halo-13 · Nov 1, 2004, 14:45

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.

Johan Dahlström · Nov 1, 2004, 15:51

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.

-Ox · Nov 1, 2004, 16:17

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

Nov 1, 2004, 13:39	#1
BeauCreative SitePoint Addict Join Date: Oct 2004 Location: Michigan Posts: 354	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?

Nov 1, 2004, 14:45	#4
Halo-13 I'm in your computer! Join Date: Jun 2004 Location: Minneapolis, MN Posts: 243	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.

Nov 1, 2004, 16:17	#6
-Ox Beer Monster Join Date: Apr 2003 Location: sowth afreeka Posts: 374	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

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Nov 1, 2004, 13:44	#2
JRMillion SitePoint Wizard Join Date: Apr 2004 Location: Arlington VA Posts: 2,103	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.

Nov 1, 2004, 13:48	#3
vgarcia ☆★☆★ Join Date: Jan 2002 Location: in transition Posts: 21,481	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 ).

Nov 1, 2004, 15:51	#5
Johan Dahlström The MacGyver of Design Join Date: Oct 2004 Location: Uppsala, Sweden Posts: 557	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.