Just like most people, apart from maintaining Queness, I have a full time job work as a web developer in an digital agency. These few months I'm assigned with a few development jobs. Basically, I have to take care of the implementation of websites, which covers backend, frontend development except design. Quite intensive html, css and heaps of jQuery scripts going on.
Just like usual, I know I'm not the only one who will be maintaining those websites, so I have to make sure the code I produced must be easy to pick up by other teammates/colleagues/designers/developers. I have had a few of bad experiences that I have to read someone else's code, and the way they code it was horrible. It doesn't mean that the code is not efficient, but it was just too hard to read, to enhance and/or even to debug it. Most of the time, I ended up tidy it up first and then continue with my job. I believe this has happened to some of you as well, it's almost inevitable in web industry.
So, I think it's a best practise to not only make a visually well-presented website to the clients, but also have to make sure it's easy to maintain by other developers/designers. I have a few tips and tricks on this topic and I want to share with all of you. :)
2. Put indentation
Indent your code, make it easy to read. Well, it can be done by yourself from the start of the project and some of the html editors support auto-indentation as well. However, if you are half way completing or already completed the website, you can always use free tool to indent your html/css code.
I found some online tools that can save your time,
3. Comments your code
And also, check out the source code of Komodo Media, it's kinda funny.
4. Semantic HTML
Semantic HTML means using HTML tags for their implied meaning, rather than using a div or span for everything. The following is some of the examples we should use the existing html tag rather than div or span.
- Use H1, H2, H3, H4, H5, H6 for heading instead of using div or span
- Use LABEL as a label for an input field instead of using div or span
- Use UL list for nav, list of links, list of categories instead of using div or span
Using existing tags can save time, well at least we don't have to think a class/id names (in some cases) and it's so much shorter.
5. Meaningful Classes & ID
I'm not sure how is this sound, but I do stick to several naming conventions for CSS classes and IDs. For example:
- hdrXXXXX - header
- lblXXXXX - label
- txtXXXXX - text field
It makes the CSS stylesheets a little bit more meaningful. I think I have been using it for quite a while, and I got that concept when I was leaning Visual Basic 10 years ago :)
6. Validate it
Use the validator from W3C Markup Validation Service. It's really useful to identify problems. It happened to me a lot of times that I have forgotten to add forward slash on the close tag, and ended up openning two tags. I would recommend, before you start fixing IE bugs, validate it first and tidy up the code and you might able to fix some of the bugs that cause by human mistakes.
7. Organize your files
Put all your files and categorised them in correct file structure, so files can be easily located. The following is the file structure I have been using:
8. Tidy up for IE
There are a lot of posts out there that talk about "CSS Hacks for IE". Well, my point of view is - do not use them at all. The right way to do it is, create conditional tag and prepare different css stylesheets for IE6, IE7 and IE8. It's a future proof method, because you never know, what if the hack you're using now is patched by microsoft some day in the future.
I hope this article will help you all. If you have any ideas, do share it with me! Please help me to bookmark it, share it and spread it to the rest of the web designers and developers! :) Also, subscribe my RSS or Twitter for future update!