How do you format your code?

Posted on by

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 :D

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? :P

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:

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

No related posts.

6 thoughts on “How do you format your code?”

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

  2. neah

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

    why? because very large CSS files are more readable like that

  3. Indeed. But very large file will have more KB this way :) So… between readability and small size with well commented code, i pick second :P

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

  6. 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 :D

    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 }

Leave a Reply