关于组件开发中皮肤使用的一点想法

在网站开发中经常遇到不同的样式相同尺寸的组件，比如确认框、输入框、按钮等等。可能在一个网站中重用的次数非常多。我们可以把这种形式开发成组件，不同的地方，直接换套皮肤，重用组件，防止重复开发。

以前用bootstrap的时候，可以发现bootstrap高度重用组件。我觉得可以按照bootstrap的思路继续细化一下，bootstrap的样式改变还是依靠class，为了让组件更加聚合可以使用class来实现。

比如在一个网站里面，重用一个模态弹窗，其中包括：确认、警告、提示等等情形。在设计组件的时候，可以让里面的功能按钮被一个div包裹，然后在js里面通过动态设置这个最外层根节点的className的名字达到换肤的效果。这里实现的原理是通过改变最外层元素的class，实现CSS的子孙选择器，达到换肤的目的。下面是例子

html

 //默认样式
      
      

CSS

.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实现更换最外层元素的class来实现皮肤的更换。