智能编码和“抽象”思维，以简化模板变化

Question

我有这个基本的HTML / CSS模板，我会做很多儿童网站，会对<h>标签，背景颜色等等使用不同的颜色和图像变化。

我正在寻找修改基本主题的方法，并使其为了创建具有颜色变化的子模板，我将修改一行代码（类似.this-smart-class{color: #mycolorcodehere)和瞧，所有元素使用变色。

我已经开始自己做一个方法来做这件事，但我是前端开发的初学者/中级人员，我很想知道这样做的不同方法。 我希望只使用CSS，也许是一些jQuery，但只有证明它使它变得非常实用。

为了更好地理解这个问题，请查看截图： 相同布局的变体。

如果您发现此问题为“非特定”，请在投票或关闭之前询问我，我会在多个问题中将其分解，但我认为可能会有好的答案，我可能不会使用正确的条款因为我没有足够的经验，所以具体到我想要的。

Answer 1

最好使用CSS预处理器（我更喜欢LESS）。 您可以制作不同的颜色配置文件，例如“color-config-red.less”和“color-config-violet.less”，您可以在@background-color等变量中定义不同的颜色，然后重复使用它们。整个项目。通过该设置，您可以简单地为不同的网站包含不同的颜色配置，同时具有相同的布局。

Answer 2

我倾向于使用许多泛型类，我可以将其应用于任意数量的元素。

例如：

.smalltext { font-size: 0.8em }
.bold { font-weight: bold }
.clear { clear: both }
.highlight { background-color: #999999 }

我之前已经提到过，有些人批评它，但它对我有用。

然后我可以说：

<div id="footer" class="smalltext"></div>
<div id="box-header" class="highlight bold"></div>