关于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
    color #fff
    background-color $themeColor

使用时

<div class="menuItem actived"></div>