Css Best Practice Dilemma - specific case

A client asks for an admin table and one column will have different cell colors based on some rules.

My problem is : what is the best css practice for this.

• we know inline is bad from the start
• we could do some css classes for each color and give them a good name but this will just clutter then main css file with classes that will probably never be used again.

So what would be a good approach for this simple probl开发者_如何学Cem ?

So what would be a good approach for this simple problem ?

You have essentially already outlined your two options. It's your choice.

I would always go with classes, and never with inline CSS. If you're worried about cluttering, you could add some order using comments:

/** Table highlight styles **/

table.data td.highlight { background-color: #CCCCCC }
table.data td.total     { background-color: #ABCDEF }

You could theoretically put these into a separate CSS file, but the number of style sheets should be kept as low as possible. To do this right, you could use a CSS preprocessor as suggested by @Ian.... but that is an entirely different and new can of worms.

Personally, I would recommend using something like dotless(DotNet) or less (Ruby).

Here you can define a colour like @MyMainColour and then have div.SomeBackground { background: @MyMainColour; }

These tools will allow you to "compile" your CSS compress and turn out customer specific themes.

You might consider:

Keep a separate css file for specific adjustments. This might be a good compromise between keeping a main style file uncluttered, but still be able to target specific GUIs with adjustments.

Let a GUI have an id. This way you can let GUI specific adjustments only affect that GUI with styles given in context.