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?

In case of CSS
 #animals { … }

 	#birds { … }

		.mochkingbirds { … }
In case of HTML
<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:

the css

HTML example:

Final notes

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...