关于CSS样式设计-部分代码如何重用的问题

Question

开发环境/工具：
vue.js 小程序 stylus

代码效果图如下，就是点击按钮的时候变化样式。

感觉下面的代码太冗余了，2个样式类内容基本一样只是文字颜色和背景色变了。 一般这种情况该如何写让代码更精简？

.menuItem
    float left
    width 80px
    height 40px
    line-height 40px
    margin-right 8px
    text-align center
    color #aeaeae
    font-size 14px
    border-radius 10px
    background-color #fff
    .menuItem-actived
    float left
    width 80px
    height 40px
    line-height 40px
    margin-right 8px
    text-align center
    color #fff
    font-size 14px
    border-radius 10px
    background-color $themeColor

Answer 1

这种情况下，应该各司其职，一个css提供常态属性(本例中的menuItem），一个提供个性属性（本例中的actived），个性属性在常态属性基础上生效，覆盖同名属性。stylus改成如下的样子.menuItem.actived &nbsp;&nbsp;&nbsp;&nbsp;color&nbsp;#fff &nbsp;&nbsp;&nbsp;&nbsp;background-color&nbsp;$themeColor使用时<div&nbsp;class="menuItem&nbsp;actived"></div>