CSS Best Practices

By Cesar Olivas

When you start creating a website, you have to make some choices before you start. Some of these choices are using HTML or XHTML, Tables or Divs, Floats or Position, Inline Styling, etc. In this post I will give you some explanation of all the elements that you usually need to choose from.

Doctype
Every website needs to have a doctype declared, failing to do so may result on your page rendered ineffectively. The best way is declaring a doctype like xhtml transitional, strict or html 4.01 and help meet standard requirements. As a personal experience, this has been an issue in SharePoint implementations, since default masterpages do not include a doctype. In a customization, the best way to deal with this is declare a doctype so you can fully transform your site.

External Stylesheets
You shouldn’t have to use the style tag for SEO purposes. Not the end of the world, but it is bad. You should always link to an external stylesheet or stylesheets. For larger projects, you would be better off using a set of stylesheets for different parts of the site, instead of one 10000 lines long stylesheet. It happens, especially of you need to apply hacks for different explorers.

HTML or XHTML
There are some reasons as to why coding should be done in xhtml. First of all: HTML is dead. Html has absorbed lots of xml features and transformed into xhtml. Second of all: XHTML can be read in xml devices, so let’s go ahead and use it.

Tables or Divs
This shouldn’t even be a question, tables are not appropriate for layout purposes, they don’t get along with CSS and they aren’t accessible at all. Having said this, I would not rule out tables 100% all the time (maybe 99.9%). Sometimes you will have to deal with this, and use tables.

Floats or position
CSS layouts will require either floats or positioning. These techniques are used to give the illusion of columns. They both have drawbacks, for example, positioning requires clearing the floats, and positioning limits the flexibility of the layout. Some people would tell that positioning is the way to do it, because it is the oldest way to do it, I personally use floats, since it allows for accessibility if text needs to be resized. With positioning, the layout would break.

Inline Styles
CSS should only be applied using classes and ids. Classes will be the most common way to do it; though I personally use IDs in all my “main” divs that conform the core layout. Using inline styles means that you have to look into the html to make the proper changes, which is really bad, it takes time, and there might be a chance that you can break the page.

CSS Shortcuts
Shortcuts in CSS are great to reduce your code, it can really help you to keep it clean and straight to the point.

CSS Rollovers
CSS has effectively done this really easy for us. Use pseudo classes to accomplish this instead of javascript!. There are lots of techniques around, look for them, or develop your own.

Good Coding
There are different ways of doing that. I personally, use firefox as my base, and then I fix it to match the other browsers. There are some people who would do it the other way around.

CSS is a great tool; it has been around for some time, so use it wisely to better maintain the look and feel of your site. Effective use of CSS will result of easy maintenance of the site, easy changes of l&f, greater accessibility and fewer headaches for you.