在网站开发中经常遇到不同的样式相同尺寸的组件，比如确认框、输入框、按钮等等。可能在一个网站中重用的次数非常多。我们可以把这种形式开发成组件，不同的地方，直接换套皮肤，重用组件，防止重复开发。<p>
以前用bootstrap的时候，可以发现bootstrap高度重用组件。我觉得可以按照bootstrap的思路继续细化一下，bootstrap的样式改变还是依靠<code>class</code>，为了让组件更加聚合可以使用class来实现。<p>
比如在一个网站里面，重用一个模态弹窗，其中包括：确认、警告、提示等等情形。在设计组件的时候，可以让里面的功能按钮被一个<code>div</code>包裹，然后在js里面通过动态设置这个最外层根节点的<code>className</code>的名字达到换肤的效果。这里实现的原理是通过改变最外层元素的<code>class</code>，实现<code>CSS</code>的子孙选择器，达到换肤的目的。下面是例子<p>
html<p>
<div class="theme_A"> //默认样式
<span class="theme_span_1"></span>
<span class="theme_span_2"></span>
</div>
CSS<p>
.theme_A .theme_span_1{
.......
}
.theme_A .theme_span_2{
.......
}
.theme_B .theme_span_1{
.......
}
.theme_B .theme_span_2{
.......
}
.theme_C .theme_span_1{
.......
}
.theme_C .theme_span_2{
.......
}
如此只需要通过js实现更换最外层元素的<code>class</code>来实现皮肤的更换。<p>
