Let’s start with the idea that code is design by itself - in some way. It needs to be organized, optimized, and above all it needs to have a decent and uncomplicated browsing layout.
The following technique I only started to work with on recent client works and realized it was the best method for me to code large CSS and XHTML files in order to keep them organized and easily managed anytime needed. Because as well all know – it’s never fun to search for a particular selector in such big mess.
I called it CSI coding – initials of Comments, Spaces and Indents. Why do I see it useful?
- It keeps my code organized and optimized at the same time.
- It's not like any other "css-only" method.
- Easily understandable and rapidly let's me find what I need in the code
- Helps me in large CSS and XHTML files.
- It's no hard work, really.
CSS Tip: Document size always matters so I will recommend using a one-line property list for each class or id. What are the benefits? That way (1) you wouldn’t need to scroll down to the bottom of the earth in order to find what you need, (2) easier for you to find ids and classes without being confused by the properties of each and (3) it certainly saves lots of space.
Note: You may find this method only helpful during the coding process and after you’ve finished the design phase – you may want to optimize it even more (by deleting the comments, the spaces and the indents. One way can be cssclean.com.
Another note: This technique may or may not work in all cases - I touch basics. Then you may take this further by applying your own methods you feel most comfortable with.
So let’s get to it, uh?
Comments
What are the benefits of comments?
Comments are the greatest when it comes to organization. They have this special appear that we can’t avoid but look at them. They are easily noticeable for the eye - (1) because they have these dashed lines that rapidly catches the eye’s attention and (2) because most text editors have them in a different and noticable color than the rest of the code – such as light grey or green.
How should you use the comments?
First of all, you should name your comments by the subject of what the group’s selectors or divs all have in common. This means (in case of CSS) that if the next 3 classes and 2 ids relate to the website’s footer, then name the comment:
/* ----- Footer ----- */
or in case of HTML:
<!-- ----- Footer ----- -->
It's pretty obvious; make sure to be short and subjective. Next, remember not to blast the comments with 100 dashes and 50 symbols – there is no need, it will just increase the size of your file.
Spaces
What are the benefits of spaces?
When it comes to division of code, spaces rule. They help the eye to easily and rapidly search and find the necessary code – excellent visual separation. Nevertheless, having too many spaces (that count as characters as well) can end in a big sized file – and we don’t want that do we?
So how should you use the spaces?
Try using minimum amount spaces but still have it look organized. I recommend using 1 space between each group of related selectors or divs. Do not add an extra space below the comment – it’s pretty pointless.
Indents
What are the benefits of indents?
Like spaces, indents are used to organize code logically and make it visually appealing and separated - just that instead of vertical spaces, they are horizontal. Indents help you relate different classes/ids or divs with each other. Think of indents as a method of making a sitemap for you code – it divides the groups into different “sub-groups” that relate to each other or that are included inside each other. Indents make it easier for the eye to catch and increases eye search, just like spaces. However, you must be careful with the number of indents you are giving because then it makes the source very wide and difficult to read.
How should I use the indents?
I’ll give you a quick example of what I mean by “relating” to each other: let’s take 3 levels of selectors – animals that contain birds that contain mockingbirds. So how will it look with indents?
#animals { … }
#birds { … }
.mochkingbirds { … }
<div id=”animals”>
<div id=”birds”>
<div class=” mochkingbirds”></div>
</div>
</div>
Pretty logic and easy too, right? Exactly.
Now Let me help you visualize it.
CSS example:

HTML example:

So that’s my way of coding from now on and I hope you learned from it as well. I am sure that once you get the idea you will start coding that way automatically. And remember: each and every other element I mentioned in this article has a certain amount of effect on the file’s size – therefore you should apply these methods with appropriate thought and care. Let me know what are your ways of coding and how you benefit from them...
Comments
Another technique I use is to rest my style sheets with
* { margin:0; padding:0; }
Then build the style sheet back up to a default of my own, formatting all the HTML tags.. ie
/***** Global Settings *****/
html, body { border:0; }
body { font:100%/1.25 Verdana, helvetica, sans-serif; text-align:center; }
/***** Common Formatting *****/
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
h1 {letter-spacing:-1px; font:2em Verdana, helvetica, sans-serif;}
h2 {font:1.3em Verdana, helvetica, sans-serif;}
h3 {font:1em Verdana, helvetica, sans-serif;}
label, p, ul, ol, blockquote {font:0.8em Verdana, helvetica, sans-serif; line-height:1.5em;}
ul, ol {list-style:none;}
ul li, ol li {margin:0.5em 5%;}
blockquote {margin:0.5em 10%;}
small {font-size:0.85em;}
img {border:0;}
sup {position:relative; bottom:0.3em; vertical-align:baseline;}
sub {position:relative; bottom:-0.2em; vertical-align:baseline;}
acronym, abbr {cursor:help; letter-spacing:1px; border-bottom:1px dashed;}
/***** Links *****/
a, a:visited {text-decoration:none;}
/***** Forms *****/
form {display:inline;}
input, select, textarea {font:1em Verdana, helvetica, sans-serif; display:block;}
textarea {line-height:1.25;}
label {cursor:pointer; display:block; margin:0.1em 0;}
/***** Tables *****/
caption {font:0.7em Verdana, helvetica, sans-serif;}
table {font:0.8em Verdana, helvetica, sans-serif;}
table tr {background:#eee;}
table tr td, table tr th {padding:0.5em;}
Once I've done that I start building my site in another style sheet..
I then import all the style sheets in to a master style sheet
/**** Master CSS Document ****/
@import url("reset.css");
@import url("global.css");
@import url("structure.css");
I find that this technique gives me less bugs when coding sites up.
ADMIN NOTE: This comment has been edited in spaces.
Take a look for example at a "Table of Content" page - the page only displays the important "headlines" of the content, WITHOUT giving any actual information. The same goes for CSS in which the headlines are the selectors. Simple as that.
The only drawback I see in 1-line CSS code is that there are no drawbacks. It might be simpler for CSS beginners to do it the classic way, maybe because it's easier for them to notice the properties for each selectors rather than having to have to search on 1 single line for a certain property. I personally got used to it and I see now how much time it saves me.
You want a debate... go ahead!
However, the indent idea is interesting, I've just started doing that from the last couple of weeks. And for comment I usually add an end comment line with a flag, eg,:
/* -------- header -- */
blablabla
/* ------- #header -- */
It depends in what editor you are using - but in most ones you can easily change the settings for the code no to "Wrap to page" (from TextEdit)
However, I disagree on the on-line CSS properties idea. As others have said, when you have multiple properties, you end up with long lines of codes and need to scroll horizontally to find what you're looking for.
Also, your comment about "it's the same as adding 4 more lines to the file - pointless.", it's no big deal. In the end it only adds one character for each line break for the bonus of easier readability (IMO). It's not like you're multiplying the file size by four (in your example).
I usually have more than four properties per CSS class, which combined with class name itself, make a long line. And if you throw in an indent or two, you end up with something so immensely long, that it can be seen without scrolling only on 1920x1200. Sure enough, classes with only one property are one-liner, but that’s it.
To have the different class properties each on new line gives you the added advantage of more quickly finding the one you need, because your eye just scans the first two or three letters on every new line and stops on the searched one. This goes faster than having to scan a 300-letter line for the right passage.
Ditto on the XHTML indenting though.