How do you format your code?

28 Nov

I’ve been asked few times how do i format my code. I try to stick to a easy to read and understand style. Sometimes i do, sometimes i don’t. Let’s talk first about those times i do

CSS Code

Each child is indented with a tab. So, i have this style:

#header {
 
}
	#search {
 
	}
		#search button {
 
		}

When you read only CSS you know that #header is the parent, #search is his child and the parent for button. Easy to read, easy to understand, right?

I try to avoid code like:

#parent #another_parent #header #search button { }

Because is kinda bogus.

I saw some guys who wrote their code on single line, without any indentation. Even if you have a less KB file, the result is hard to read and edit. Even though, i use very rarely one line code when i have to add one-two rule to a selector ( something like .element { color:red } ).

HTML Code

Actually… Somehow, i have same rule here: every child have a one tab indent:

<div id="header">
	<form action="" method="get" class="search">
		<button type="submit">Button</button>
	</form><!--/.search-->
</div><!-- /header-->

As an extra info: when i have large blocks of code (div, forms), on closing tag i add a comment with the id or class name: if the block has a class, the closing comment is /.class name and if is an id /id name

Again, easy to read and to maintain, especially when you reuse some of your code.

Javascript/jQuery Code

Well.. Probably is already clear enough how do i do:

function function_name() {
	var someVar = 1;
	if( someVar === 1 ) {
		alert('someVar is 1!');
		for(i=0;i<10;i++){
			alert(i);
		}
	} else {
		alert(':(');
	}
};//function_name

Conclusion

The main keywords are: indent and comments. You don’t have to overuse indent, because the code will be impossible/hard to read. Also, don’t over-comment your code. Don’t comment the obvious :

var foo = 'bar'; // the 'foo' get 'bar' value

Well.. I can’t say nothing else but „happy coding!”.

Tags: Advices, Tips & tricks Comments (6)

Bookmark this article!

Did you like this article?

Don't hesitate to subscribe to my RSS feed!

Also, don't forget, you can also read me on twitter!

6 Comments »

November 28, 2008 stefan alexandru said:

I format my xhtml / html / php / java / c++ / and all other types of code exactley like you, meaning, one tab for each child. I never indent my css the way you do, i have do admit, it’s preatty easy to read, maby ill try that some day.
December 3, 2008 de ce? said:

neah

#header #navigation #text { all the propreties inline; } rullz in CSS!

why? because very large CSS files are more readable like that
December 3, 2008 Ionut Staicu said:

Indeed. But very large file will have more KB this way So… between readability and small size with well commented code, i pick second
December 4, 2008 de ce? said:

huh? line breaks and spaces does count as size, so my variant is smaller (way smaller) and if it’s written by a simple rule:

selector { width; height; positioning; margin; padding; background; color; font; others; }

and in true cascade (footer after content and header) is still very readable.

PS: needless to say about scrolling through code… and visual searching but, anyways, everyone has to have his own code formating (or, maybe auto-formating in dreamweaver)
December 4, 2008 de ce? said:

offtopic later edit: put some margin after paragraphs in comments, pls
December 4, 2008 Ionut Staicu said:
offtopic later edit: put some margin after paragraphs in comments, pls

Done. For no reason, when i wrote this theme, the whole comment was in its own paragraph (you can see the problem “at work” on my other blog). That’s why was that problem

but, anyways, everyone has to have his own code formating

Indeed! No one will change his style after few years, right? I had a friend who code like you do and i had to do some changes on his code. Useless to say that was a nightmare

huh? line breaks and spaces does count as size, so my variant is smaller (way smaller) and if it’s written by a simple rule:

I was saying about this :
```
#selector #selector2 #selector3 #selector4 { the real code }
```
instead of :
```
#selector .class { the code }
```