10 More awesome coding tips
April 18th, 2008
You read it right, another “TOP 10″ list for you to reference to, or to let me know that I am not telling you anything new…which I hope not the latter.
Enjoy.
1. Use a doctype
I can’t tell you how many times people still do not include a proper doctype, or one at all. This will probably help solve, or at least get you on the road to fixing 80% of layout issues. Here are the 2 most commonly used doctypes:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
99% of the time if you are designing from the ground up, you can use a strict doctype.
2. Remove whitespace before doctype
Ok, so you now are using a doctype properly, but there is still some whacky stuff going on in IE. Check your code. If you have any leading whitespace above the doctype, chances are you are in Quirks mode, and that is not a mode you want to be in for debugging issues.
You can have server side code, just as long as it does not generate any spaces, comments, or code.
3. Validate every page
Cannot stress this one enough. To save yourself a headache, make sure to validate all your pages. You can download the Firefox extension that will allow you to see most of the time, just by looking down to your right hand side of the screen, a little green “check mark”, indicating you are in the clear!
By validating, you are basically doing a few things here. You are developing great coding habits, and also making some idiot checks on your code. Malformed markup can lead to bad looking layouts more often than you can imagine.
4. Indenting
Tabs or spaces? It doesn’t matter which you choose, just as long as you are using a consistent method for indenting. I personally find it much easier to tab my indents, but I guess it is all preference.
Not only should you indent your (X)HTML, but you can and should carry these same fundamentals over to your CSS, and other languages. Indent child selectors under their parents, to make for an easy to read document. Save your eyes, and mind the trouble of having to figure out which elements belong to which groups.
5. CSS Flags
Use CSS Flags to quickly, and painlessly navigate your documents. Simply add a “=” before your section headings in your code:
/* =Footer
———————————————– */
6. Use Semantic Naming Conventions
I must admit that I need to clean up my own code to adhere to this standard a little better. Basically what you are doing here is making sure you don’t name your divs something like:
<div id=”blueBox”>Hi, I am blue</div>
Which might make plenty of sense at the time, or as long as that box is blue, but what happens when you want to change it to orange?
Use an approach that describes the content it contains:
<div id=”mainContent”>This week sucked.</div>
7. Reset your CSS
Before you do any coding, save yourself some pain, and reset your styles. Luckily enough for you, Mr. Eric Meyer has already done so.
8. Keep inline styles and JavaScript out of the markup
Just to avoid any funny forgetful mishaps, keep both of these out of your markup.
9. Limit width declarations in your CSS
This is just a recommendation, but if you keep your widths to mainly the container or wrapper elements, you won’t have to remember to change as many if you decide to use a different measurement. Of course you could avoid this by using a different method, such as em.
10. Use Comments OFTEN
Comments are great, except when before your doctype…then they are a no no. In general though, they are your friend. They will help you remember when you might have added/changed or removed something from your original source. Future developers will also thank you for well documented files.
Oh, and if you liked it, why not head over and Digg it?
- Posted at 2:50 pm in resources
-
Leave a comment
