UI Development is getting cleaner and easier day by day.

I was impressed when I came across Yahoo UI library’s CSS patterns and ideas.

Personally I don’t like the idea of completely adopting any new framework when time is a major concern.

But YUI looked impressive ever since its launch.

Check out the example page of reset CSS

Its so easy to cook up websites rapidly using such frameworks !! Wow

As long your site uses limited styles and if your content presentation logic is simple and does not change much with time , you can afford to store your styles in static files.

What do I do when the styles change very often ?

Simple answer . Store all of them in a database table .

Is’nt a Database solution for just CSS a overkill ?

Might be , but if your business demands constant changes and you want to have control over style changes and avoid conflicts.
A Style Configuration Database is the way to go.Its surely a overkill for the small sites or sites with limited stylesheets.But when maintenance becomes a problem and when confusion creeps into styles, its high time you build a simple system to handle this.

What to store and what not to store ?

Avoid storing single styles.Storing entire stylesheets would be a good idea.A Content Diff logic which will track revisions will be good enough.

Database Reads are expensive.Avoid them.

A good idea will be to cahe the CSS files on the disk. Almost all popular web languages have some caching solution.

Who can benefit the most from this ?

Multilingual Sites

Sites which offer Personalization / theming options

Presentation rich sites which may me have heavy styling (Not RIAs )

1.Divitis , Classitis, Tagitis

Please think twice before adding a tag to the page.

Bad code

 
<div id="header">
 
<div class="headerTop">
<h2 class="headerTxt">Site Name</h2>
</div>
 
<div class="headerTagline">
<span class="tagline">tagline</span>
</div>
 
</div>

Better Way

 
<div id="header">
<h2>Site Name</h2>
<span class="tagline">tagline</span>
</div>

2.Tables are okay for tabular data

I see some times that web developers are so passionate about divs and table less designs that they try to fake a table using divs (I was one among them ) Be sensible to use tables when you are needing to show tabular data, like a list of customers orders etc.

 
<table>
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  <tr>
    <td>1</td>
    <td>varun</td>
    <td>varunkrish.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>google</td>
    <td>google.com</td>
  </tr>
</table>
 
is okay compared to 
 
<div id="table">
  <ul class="heading">
    <li>col1</li>
    <li>col2</li>
    <li>col3</li>
  </ul>
  <ul>
    <li>1</li>
    <li>varun</li>
    <li>varunkrish.com</li>
  </ul>
  <ul>
    <li>2</li>
    <li>google</li>
    <li>google.com</li>
  </ul>
</table>

3.Let the page have good content flow even with CSS removed.

By writing Semantic Markup, you make sure the content flow displayed to the user remains the same even with CSS turned off.
This is very critical when you see from the angle of the Search Engines and Mobile / PDA Devices.This also mean that you separate the content from the presentation

4.Use Tools to make ur life easier

Firefox – Web Developer Toolbar

IE – IEDEV Toolbar

Opera – Dev Opera tools

5.Why do you need Inline Styles ?
Dont use them unless you want to messy code . Try to keep all the CSS in external files. Split the files if it gets big.

6.CSS / Loading times

When loading times of CSS file becomes a concern , you must try moving the styles into separate files so as to the reduce the amount of data. Also you dont need all the styles in the world for a single page. So organize them acording to your needs

7.Use relative paths to images

I see a a lot of sites using absolute paths for images used in either the HTML code or for the CSS background images.

Be smart, use relative paths to your images.

use 
background-image:url(/images/background.gif);
 
instead of 
background-image:url(http://site.com/images/background.gif);

8. I can do a lot of this with HTML why do i need XHTML ?

But HTML is loosing adoption and XHTML is gaining acceptance.Check these pages

for some benefits

New York Library site
WSG

XHTML is more closer to XML although both are derivatives of the same.

9.Make you site printer friendly with just a extra line of code and a CSS file

You must have seen media=”print” or media=”projector” line while including CSS files.

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Should do the trick

10. Use a Syntax validator

XHTML
CSS