I have been given a design that's most obvious feature is it's use of color. On previous versions of this site I have used color names as class names i.e.

<div id="nav">
        <li class="red">one</li>
        <li class="blue">two</li>

<div class="block blue">
<div class="block red">

Bare in mind that there are several different colors and I am using Sass for this site so I do have variables available in my CSS.

Using color names as classnames generally goes against best practices - along with #leftcol (because who knows, tomorrow the client might ant it to be on the right).

Wondering if anybody else had experience with this and how they have coped.

3 answers

This was chosen as the best answer

It is possible to get too hung up on semantic class names, if the colors don't stand for anything, but it makes sense to use the color as a class, then do it and stop worrying.

If all pull quotes are green, then it makes sense to use class=pull-quote and declare it to be green. but if there's no logical grouping for the use of green, other than to apply it in lots of instances, then there really isn't anything wrong with class="green".

Answered almost 10 years ago by Tony Crockford
  • Yeah, sounds good, I just want to be really prepared should the client want everything green to be red, I'll have to do a search and replace for all greens to be red, I think I may have .col--1, .col--2 for colours, then in SASS have .col--2 = !blue at the top of my file, then I'd have to only change one word. Thanks for the response. nine_toes almost 10 years ago
  • in which case you could use class="shade-one" and put a comment at the top of your CSS that references shade-one to a color. Tony Crockford almost 10 years ago
  • col looks like column to me. Tony Crockford almost 10 years ago
  • good work, yeah that's what I thought in the end, going for the shades. nine_toes almost 10 years ago

I would recommend staying away from colors as class names for just the reason you mentioned (i.e. #leftcol). Instead consider object oriented or purpose-based naming conventions.

My website is entirely palete-based but I chose definitions that reference the sections rather than the colors.

<ul class="msg">
  <li>Messages row</li>
<ul class="pics">
  <li>Pictures row</li>
<ul class="vids">
  <li>Videos row</li>

I hate to pseudo-spam a link to my site but it directly relates to your question and the CSS is well documented: Site - http://shimone.info + CSS

Answered almost 10 years ago by Shimone Samuel

Since you are already using Sass, why not simply use color variables? E.g., using one of the previous replies, the following would apply

$msgColor = "...." (some rgb, or other format, value) $picsColor = .. ...

[...] .msg { color: $msgColor ... }

This way your semantic markup remains clean. Futhermore, if your colors are somewhat related you could use arithmetic on the first value, and if not declare a small list or hash of values.

In any case you can minimize your color config. to a single line.

Answered about 9 years ago by JF Rompre