php - 将多个 css 类分组到另一个类

Question

无论用户来自哪个城市或州，我的页面都有特定的样式。因此，如果他们来自新泽西州，背景将是红色的。为此，我现在正在做类似的事情:

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;
}

当我想向彩色页面添加新元素时，我必须转到每一行并实际添加类似 .Pennsylvania .Middle-Bar 的内容对于我拥有的每个位置。

有更好的方法吗？我知道我可以用颜色代码做一些数据库并以这种方式做样式，但我更愿意在样式表上有尽可能多的性能。

Answer 1

为什么不写

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

和

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

.Pennsylvania .Bar
  background-color: blue;
}

然后如果你想要另一个元素，你可以这样写

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

并且颜色样式将被自动拾取。

如果你想要一些特定于中间栏的其他样式(比如字体粗细)而不是书写

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

你会写

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