Group multiple css classes to another class

Question

My page has specific styling for whatever city or state the person is from. So if they were from New Jersey the background would be red for example. To do this right now I'm doing something like:

HTML/PHP

<div class="<?php echo $row["location"]; ?>">
  <div class="Container">
    <div class="Top-Bar">Name</div>
    <div class="Bottom-Bar">Location</div>
  </div>
</div>

CSS

.New.Jersey .Top-Bar, 
.New.Jersey .Bottom-Bar {
  background-color: red;
}

.Pennsylvania .Top-Bar, 
.Pennsylvania .Bottom-Bar {
  background-color: blue;
}

When I want to add a new element to the page that is colored I have to go to every line and physically add something like .Pennsylvania .Middle-Bar for every location I have.

Is there a better way to do this? I know I can do some database with color codes and do the styles that way but I'd prefer to have as much on the stylesheet for performance.

Answer 1

Why not write

<div class="<?php echo $row["location"]; ?>">
  <div class="Container">
    <div class="Top Bar">Name</div>
    <div class="Bottom Bar">Location</div>
  </div>
</div>

And

.New.Jersey .Bar
  background-color: red;
}

.Pennsylvania .Bar
  background-color: blue;
}

Then if you want another element, you can write, say

<div class="Middle Bar">Population</div>

And the color styling will be picked up automatically.

If you want some other styling (say font-weight) specific to the middle bar instead of writing

.Pennsylvania .Middle-Bar
  font-weight: bold;
}

You'd write

.Pennsylvania .Middle.Bar
  font-weight: bold;
}