css技巧——减少代码重复

尽量减少改动时要编辑的地方可以有效增加可维护性

例如：

#btn{
            padding: 6px 16px;
            border: 6px solid  #446d88;
            background:#58a linear-gradient(#83b2d1,rgb(79, 117, 143));
            border-radius: 4px;
            box-sizing: 0 1px 5px gray;
            color: white;
            text-shadow: 0 -1px 1px #335166;
            font-size: 20px;
            line-height: 30px;
        }

很多值都写死了，这样后期维护很麻烦，可以这样做： 将字号改为以父级字号为标准 font-size: 125%;再将其它写死的部分也改成动态的（em为单位），这样这些值就会依赖字号大小进行缩放，改一个字号就能改变所有尺寸样式，而不用一个个去更改

 #btn{
            padding: .3em .8em;
            border: 0.3em solid  #446d88;
            background:#58a linear-gradient(#83b2d1,rgb(79, 117, 143));
            border-radius: .2em;
            box-sizing: 0 .05em .25em gray;
            color: white;
            text-shadow: 0 .05em .05em #335166;
            font-size: 125%;
            line-height: 1.5;/* 这里行高与字号的比例为1.5倍 */
        }

现在只要更改字号，整个按钮就会保持比例的放大缩小非常方便，当然，有时候并不是所有值都需要改成动态的，哪些需要更改，哪些不需要，这点要分清楚

新的问题来了，如果需要多个不同颜色的按钮，那么就可能要改变background,text-shadow,box-sizing,border,因为主色调不一样的话最终效果也应该不一样，这种时候只要把半透明的黑色或者白色叠加在主色调上就可以了

 button{
            padding: .3em .8em;
            border: 0.3em solid  rgba(0, 0, 0, 0.1);
            background:#58a linear-gradient(rgba(0,0%,100%,0.2),transparent);
            border-radius: .2em;
            box-sizing: 0 .05em .25em rgba(0, 0, 0, 0.1);
            color: white;
            text-shadow: 0 .5em .05em rgba(0, 0, 0, 0.1);
            font-size: 125%;
            line-height: 1.5;
            
        }
      .a{
            background-color: #bfc;
        }
      .b{
            background-color: rgb(226, 213, 35);
        }

这样只需改变颜色，就可以得到不同颜色版本的按钮