这就是我最后的做法。
1) 为每个资产创建单独的 CSS 类。
为由多个变量组成的资产连接类。
创建一个.input 父类来显示选择表单的图像资产。
创建一个.preview 子类以在完成的头像上显示图片资源
例如
.skin-brown .preview .preview-body {
background-image(<<image-asset>>);
}
.input .input-skin-brown {
background-image(<<image-asset>>);
}
.input .input-hair-style-1 {
background-image(<<image-asset>>);
}
.hair-style-1.hair-colour-black .preview .preview-hair {
background-image(<<image-asset>>);
}
2) 创建 HTML。 将默认资产选项分配给包装器元素。
例如
<div id="wrapper" class="hair-style-1 hair-colour-black skin-brown">
<div class="inputs">
Put your input FORM here. Use a HTML form element.
</div>
<div class="preview">
The finished avatar goes here.
<div class="preview-hair"></div>
<div class="preview-eyes"></div>
<div class="preview-body"></div>
</div>
</div>
3) 当输入表单中的选项被点击时，使用 Jquery 来操作包装器上的类。
例如，如果用户点击 hair-style-2，包装器中的 hair-style-1 类将更改为 hair-style-2
我对此有一个单独的问题：
jQuery: Swap Classes based on Class position
基本上就是这样。一旦您编写了 css 类和用于切换类工作的 Jquery 代码，它实际上非常简单。
因为您将所有输入存储为表单，所以当用户单击提交时，您可以将值发送到另一个进程。
提示：
1) 使用 SASS/SCSS 编写 css。
您可以创建一个数组并在 sass 中循环遍历它，这使得维护 css 变得容易。我在这里有一个问题：
Sass: Using two @each lists in SCSS
CSS - SASS: Using @each based mixins to generate multiple backgrounds
2) 避免使用 CSS sprite。
尽管精灵对加载时间有很大帮助，但我认为你会疯狂地尝试维护它（取决于所涉及的资产）。有一些工具可以为您维护它，但因为这是一个边缘案例，我认为这些工具不能很好地工作。
3) 加载速度是个问题
当用户点击头像元素时，CSS 加载会有短暂的延迟。这是一个问题，因为用户认为他们的点击尚未注册。
为了解决这个问题，创建一个隐藏的 div，它使用display:none。然后使用 CSS3 多重背景属性将每个资产附加到此 DIV（作为背景）。
这样，您的所有资产都会在开始时加载，因此用户点击时不会有延迟。同样，为此使用 SASS 循环和数组，因为数组会自动将所有资产添加到隐藏的 DIV。
4) 仔细考虑类和资产名称。
我最初选择友好的名称（例如 haircolourblack、historybob），因为我认为这样更容易理解代码。然而，事后看来，我希望我已经选择了编号名称（头发颜色 1、发型 1），因为如果您的资产发生变化，事情会变得很棘手（此外，使用数字可以很容易地针对多个化身维护代码）。同样，使用 SASS 数组来减少对此的维护。
5) 使用类前缀
（例如 .preview .preview-eye 而不是 .preview .eye 或 .preview .preview-hair-style 而不是 .preview .hair ）。这样做的原因是许多名称非常通用，可能会在页面上的多个位置使用（例如，用于 .preview 和 .input 部分）。如果使用前缀，则更容易定位特定类。另外，您可以使用[class*="preview-"] 或[class*="input-"] 来定位前缀的所有成员，而不必在代码中乱扔许多共享类（例如[class*="-hair-"] 将获得所有头发元素，而无需将单独的头发类应用于每根头发元素。
6) 考虑 SVG
如果您将 SVG 用于您的图像资产，您可以将文件保持在较小的范围内，并且它们可以放大到任意大小。请务必注意 SVG 浏览器兼容性 (http://caniuse.com/svg)
7) 考虑 CSS 背景大小
您还可以使用background-size: contain 来缩放图像资源，这样可以轻松地为 .preview 和 .input 实例重用相同的图像。但是，它也存在兼容性问题。
这看起来确实是一个令人生畏的项目，主要是因为没有任何关于如何构建它的资源。但如果你把它分解，它实际上很容易。主要是代码维护问题，所以一定要计划好！