减少css代码

Question

我创建了两个具有相同属性的类,但只有一个属性(宽度)不同,那么如何减少css代码？

.login-box button{
  width: 100%;
  height: 40px;
  background-color: #ffd133;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  border: 1px solid #ffd133;
  border-radius: 5px;
  cursor: pointer;
}


 .add-category-box button{
    width: 48%;
    height: 40px;
    background-color:#ffd133;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ffd133;
    border-radius: 5px;
    cursor: pointer;
}    

Answer 1

您可以使用逗号(,)分隔符对选择器进行分组:

.login-box button,
.add-category-box button {
    width: 100%;
    height: 40px;
    background-color: #ffd133;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;font-weight: bold;
    border: 1px solid #ffd133;
    border-radius: 5px;
    cursor: pointer;
}

.add-category-box button {
    width: 48%;
}