Dealing with repeated selectors: Placing elements together or using classes?

Question

Let say I have to repeat the color blue in my web page, what's most effective, time saving, and smart way of doing it?

Examples:

1. This example can mess up a little bit my css file.

#header, #content, #footer {
  color: blue;
}

#header {
  (other properties)
  (other properties)
  (other properties)
}
#content {
  (other properties)
  (other properties)
}
#footer {
  (other properties)
  (other properties)
  (other properties)
}

2. With this example I'll end up modifying my html file more often.

css:

.default-color { 
  color: blue

}

#header {
  (other properties)
  (other properties)
  (other properties)
}
#content {
  (other properties)
  (other properties)
}
#footer {
  (other properties)
  (other properties)
  (other properties)
}

html:

<div id="header" class="default-color">
  (content here)
</div>

<div id="content" class="default-color">
  (content here)
</div>

<div id="footer" class="default-color">
  (content here)
</div>

Answer 1

I'd prefer the first form. Adding a "default-color" class starts to move into the territory of adding style into your markup, and it's generally more flexible to keep them separate as much as possible. On the other hand, if you have a semantic class name you can add to all of those that makes sense, then that could work.

Otherwise, if you really do just want a "default" color, you can specify it on the html or div elements in your css, and just override it with more specific classes where you don't want elements to show up as the default color.

Answer 2

I would prefer the first version, too. But remember that you can also use multiple classes within one element. So you could you something like:

.blue {
    color: #00F;
}

.bold {
    font-weight: bold;
}

<div class="blue bold">Text</div>

Answer 3

Consider authoring your stylesheets using SASS. This will allow you to manage duplication in a number of ways:

The simplest is to define a variable for your blue color and not worry about having to update multiple occurrences:

$color-corporate-base: #009
#header  { color: $color-corporate-base; }
#content { color: $color-corporate-base; }

This will compile to regular CSS, putting the color values wherever they're referenced in your document:

#header  { color: #009; }
#content { color: #009; }

You could use "mixins" to include rules into different selectors:

@mixin bold-color {
  color: blue;
  font-weight: bold;
}

#header {
  @include bold-color;
  background: black;
}
#content {
  @include bold-color;
  background: white;
}

This will compile to regular CSS, with the two included style rules in each selector. Of course, this creates duplication:

#header {
  color: blue;
  font-weight: bold;
  background: black;
}
#content {
  color: blue;
  font-weight: bold;
  background: white;
}

Even though that takes care of the duplication in your Sass stylesheet source making it easy to work with, the CSS output still has that duplication. (You could group the common styles with commas and put the different styles into their own selectors, but that's right back to your original question.)

There's a cool new feature of Sass that addresses this. It's called "selector inheritance". Check it out:

.bold-color {
  color: blue;
  font-weight: bold;
}

#header {
  @extend .bold-color;
  background: black;
}
#content {
  @extend .bold-color;
  background: white;
}

At a glance, this seems very similar to mixins, but look at the CSS output:

.bold-color, #header, #content {
  color: blue;
  font-weight: bold;
}
#header { background: black; }
#content { background: white; }

This lets you organize your selectors in your Sass stylesheet as you wish, and, you get the optimized output you want!

Answer 4

One way of doing it for standard compliant browsers would be to use !important.

Example:

div
{
   color: blue !important;
}