Question

我创建了两个具有相同属性的类，但只有一个属性（宽度）与如何减少css代码不同？

$result = array_reduce($event_details, 'array_merge', array());

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%;
}

Answer 2

在这种情况下，您可以为按钮指定一个.button类，并将其作为具有不同变体的可重用组件。

.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;
}

.button--full {
  width: 100%;
}

.button--outline {
  background: transparent;
  border: 1px solid #000;
}

在HTML中，您可以添加以上类作为成分：

<强> HTML

<button class="button">Submit</button>

OR

<button class="button button--full">Login</button>

这样，您可以非常轻松地在项目的任何位置重复使用按钮。

减少css代码

2 个答案: