Archive for May, 2010

Useful Tips for Structuring HTML & CSS

  • Apply margins or padding to containers rather than to individual elements inside. This makes it easy to keep margins consistent and to easily adjust later if needed.
  • When looking at a design, look for repeated elements and structures. Think about the most basic functions of these structures when coming up with class naming schemes.
  • Look at the functions of elements from general to more specific. For example, a design may include several types of “notices” such as for errors, warnings, and success notices. The design of these should be the same except for colors for example. So use a general classname for the common “notice” styles together with a second classname for the type of notice that sets the variations.
  • Use basic semantic HTML tags. If you use semantic tags properly it’s not necessary to give everything a classname in order to distinguish seperate elements and your HTML documents will be more accessible and search-engine friendly.

Comments