Using CSS Classes for individual effects - opinions?

Question

Hey,

Just trying to canvas some opinions here. I was wondering how people go about adding individual effects to html elements. Take this example: you have three types of h1 titles all the same size but some are black some are gold and some are white. Some have a text-shadow etc. Would you create separate CSS classes and add them do the h1 tag or would you create a new single class for each different h1 title type (with grouped CSS elements)? With singular class for each effect you can build up combos of classes in html class="gold shadow" but also how would you name them. For example its bad practice to give classes and id names associated to colours, because it doesn't define what it does well. However is this ok with textual CSS classes? Just wondering what others do, I know there are no hard and fast rules.

Cheers.

Answer 1

Because you want to apply different style to elements, you will have to create a style for each of them.

Answer 2

I would try to name the classes after their purpose. I.e., what is the reason that they are gold, or white, or have shadow, etc. You could then combine those classes like you are doing now, e.g. <h1 class="featured frontpage article">.

Using <h1 class="gold"> is not all that different from <h1><font color="gold">, in my opinion.