Colors in css

[eins]

if a page contains 10 elements for example
every element has it’s own color and it’s different each other

how to write the css to keep it clean..

i mean i want to know is there any other way than written it like this

.color1{color:gray;}
.color2{color:red;}
.
.
.
.

[Paulie_D]

I know 10 was just an example but if you are using that many…it’s too many.

Sometimes, though, you just have to go with class names that actually aren’t ‘general’ just to keep things straight.

If you want that many colors then I would actually do something like:

.bg-red {
background:red;
}

.bg-green {
background:green;
}

or

.text-red {
color:red;
}

.text-green {
color:green;
}

[cnwtx]

Or even .red, .green, etc.

[Paulie_D]

I considered

.red

but it’s too generic.

What properties would you assign to it?

If you do

.red {
background:red;
color:red;
}

you can’t use it for

p .red

because it would change the bg color too?

[TreeRoot]

Just an idea. You may want to use class names that denote emotion rather than colors:

.anger {
color: red;
}
.envy {
color: green;
}
.sunny {
color: yellow;
}
.sad {
color: gray;
}
.bruised {
color: navy;
}
.embarrased {
color: pink;
}

I know, kinda silly, but if you’re feeling icky about hard-coding color class names into your HTML, this could be an escape hatch.

[Paulie_D]

He wanted to know about how to keep his CSS clean…giving them names like than color1, green or apple won’t help because although it’s descritive (or not in the case of color1) it’s not informative about WHAT it does.

.red

means nothing by itself but xxx-red does, if you see what I mean.

.bg-red, bg-angry
.border-red, .border-angry
.text-red, .text-angry

These do…and are ‘cleaner’, it seem to me at least.

Whatever, 10 is too many. :)

[eins]

i know 10 is too many.. but it’s just an example..
by the way, thanks for the help :)

[Author]

Posts