A few CSS and XHTML tips for web developers

Written by: Emanuel Blagonic

Published on: May 10, 2007

These past two month I was very busy doing many designs, redesigns, logos, layouts, etc. I didn’t have much time to write an article on my blog and I’m sorry for that. In the past few weeks I sliced a lot of layouts and built a lot of new pages with much content.

Doing that I found some tips (rather than techniques) very useful in the process. So, let’s get immediately to the matter.

Do you get lost in your XHTML code?

I got lost numerous times, so I figured out how to mark various elements of my code. I tried different approaches, but this one seemed best.


<!-- HEADER -->

<!-- /HEADER -->

So, from know on, I am commenting the start point of the element (i.e. “header”) with an comment and I’m finishing with one as well. This is more than helpful when I want to move the elements such as Contact information from one part of the page to the other. I just select it from <!-- CONTACT INFORMATION --> to the <!-- /CONTACT INFORMATION -->. I suggest you use this kind of “semantic”, because this way, you won’t get confused.

What about CSS?

Well, it is good to use CSS comments /* */ to write which part of the document you are in (i.e. /* HEADER NAVIGATION */). You can find a very good article on how to find sections of your CSS code at StopDesign.

Personally, I prefer to name my section with two and more words describing it, but these tips are also great.

The second thing you should do is group your CSS rules. I prefer to group them like this:

  1. Ungrouped styles – I use Global white space reset and also I like to apply different styles to the Body element (main color, background, font and text align).
  2. Logo – After that, I’m usually grouping the styles to show H1 as a logo.
  3. Main elements — Here, I’m grouping all the textual elements (H2, H3, H4, P ….) and even tables and lists. I noticed that it is best to use margin-bottom:value to remove the elements one from another, and here I also like to group this style for all the elements that should be removed from each other (i.e. h2, h3, h4, p, table, #content ul { margin-bottom:10px }). You could also use this area to group different aspects of the textual elements like colors, line-height etc. (i.e. p, #content li { color:#777; line-height:1.7em; font-size:1.3em }). It is important for you not to apply rules to the elements that are called elsewhere like list-items, so it is a good practice to apply the styles to the specific elements (#content li { ... }).
  4. Links — After main elements you should redefine the links. For me, this is the natural order, but after all — you should find what suits you best.
  5. Main structure — After the main elements are already defined, I usually define the structural elements like #container { width:770px; margin: 0 auto } or #content { float:left; width:400px; text-align:left }.
  6. Other elements – With the first 5 steps we’ve defined all the main elements in the page. For me, there is no specific position for the other styles. You should position them whatever suits you. But you should also take into consideration the position of the elements in the page structure (i.e. if you have a navigation in header, then you should put the “header navigation” styles before the footer styles.)

I hope you found these tips useful. If you have something to share with us, please do so :).

Further reading

70 Expert Ideas For Better CSS Coding from Smashing Magazine