如何处理 CSS 组合/继承棘手的案例样式按钮？答案

【问题标题】：How to approach CSS composition/inheritance tricky case styling buttons?如何处理 CSS 组合/继承棘手的案例样式按钮？
【发布时间】：2018-12-04 20:36:33
【问题描述】：

所以我有两个具有类的 HTML 按钮：.btn。 CSS 选择器有一个background-image: linear-gradient(...)。

现在我希望按钮的不同之处仅在于 background-image 属性的值，例如一个按钮的 linear-gradient(...) 从黑色变为红色，另一个按钮从黑色变为蓝色。

如何在不必创建另一个选择器重复.btn 的内容的情况下实现这一点？还请记住，我还有其他 CSS 选择器，例如 .btn:hover 和 .btn:active，当您将鼠标悬停在按钮上或单击按钮时，它们会产生扩展/删除渐变的错觉。

我曾考虑将background-image:.... 属性取出到另一个选择器，例如.primary 和.secondary，然后我将它们作为一个类应用到按钮上。但是.btn:hover 哪个“效果”取决于给定按钮的实际颜色呢？

描述如下：https://codepen.io/alejo4373/pen/RqmoWL

任何想法或建议都非常感谢，谢谢！

【问题讨论】：

标签： html css

【解决方案1】：

感谢@ksav 对使用自定义属性的建议。不幸的是，他们的解决方案没有使用自定义属性的强大功能。由于它们像常规属性一样级联，我们可以将所有样式保留在.btn、.btn:hover 和.btn:active 中，使它们依赖于自定义属性，只需使用.btn--primary 和.btn--secondary 即可而不是设置自定义属性。一切都集中在需要应用的类中，没有重复。

.btn--primary {
  --btn-color-top: #15FF86;
  --btn-color-bottom: #68BB42;
}

.btn--secondary {
  --btn-color-top: #fcbfc4;
  --btn-color-bottom: #811a08;
}

.btn {
  text-align: center;
  color: white;
  text-shadow: 0 0 4px rgb(96, 96, 96);
  border: 1px solid #adadad;
  border-radius: 4px;
  padding: 6px 12px;
  background-repeat: repeat-x;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.42857143;

  background-image: linear-gradient(to bottom, var(--btn-color-top) 0, var(--btn-color-bottom) 100%);
}

.btn:hover {
  background-position: 0 -5px;
  background-color: var(--btn-color-bottom);
}

.btn:active {
  background-color: var(--btn-color-bottom);
  background-image: none;
  border-color: rgba(27, 31, 35, 0.5);
  box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
}

<button class='btn btn--primary'> Primary </button>
<button class='btn btn--secondary'> Secondary </button>

这是因为无论在何处使用自定义属性（例如在.btn 的background-image 属性或.btn:active 的background-color 属性中），解析的值都是正常确定的值css 级联规则——即使这与使用var 引用的规则不同！因此，在主按钮的情况下，--btn-color-top 和 --btn-color-bottom 的值由 .btn--primary 块中的定义提供，当它们被 .btn 和 .btn:active 块中的 var 调用时。 .btn--secondary 也会发生同样的事情。

请注意，您还可以通过使用主要样式作为默认样式并使用 btn--secondary 作为替代来保存类：

.btn {
  --btn-color-top: #15FF86;
  --btn-color-bottom: #68BB42;

  text-align: center;
  color: white;
  text-shadow: 0 0 4px rgb(96, 96, 96);
  border: 1px solid #adadad;
  border-radius: 4px;
  padding: 6px 12px;
  background-repeat: repeat-x;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.42857143;

  background-image: linear-gradient(to bottom, var(--btn-color-top) 0, var(--btn-color-bottom) 100%);
}

.btn--secondary {
  --btn-color-top: #fcbfc4;
  --btn-color-bottom: #811a08;
}

.btn:hover {
  background-position: 0 -5px;
  background-color: var(--btn-color-bottom);
}

.btn:active {
  background-color: var(--btn-color-bottom);
  background-image: none;
  border-color: rgba(27, 31, 35, 0.5);
  box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
}

<button class='btn'> Primary </button>
<button class='btn btn--secondary'> Secondary </button>

【讨论】：

这正是我所需要的。您能否扩展这里发生的事情，我还不是很清楚。我阅读了 CSS 自定义属性，但我仍在尝试理解您在此处使用它们的方式。谢谢！
我尝试添加更多解释。自定义属性可能有点不直观，但一旦你了解它们，它们就会非常强大。我发现了解它们的最好方法就是和它们一起玩。我也将重新排序 css；顺序根本不重要。

【解决方案2】：

我建议使用第二个类作为替代着色。这是一个使用类.alt 的示例，它将背景渐变更改为蓝色。您尚未提供您的 :hover CSS，但这似乎可以很好地与红色或蓝色情况下的悬停一起使用，而不需要超过 .alt 的单行样式。

如果您的:hover 代码更复杂，请告诉我，我可以再玩一玩。如果您使用的是 SCSS，那么生活会轻松一些，因为您可以执行以下操作：

.alt {

    background-image: linear-gradient(to bottom,black 0,blue 100%);

    &:hover {

       // Extra styling   

    }

}

.btn {
  text-align: center;
  color: white;
  text-shadow: 0 0 4px rgb(96,96,96);
  border: 1px solid #adadad;
  border-radius: 4px;
  padding: 6px 12px;
  background-image: linear-gradient(to bottom,black 0,red 100%);
  background-repeat: repeat-x;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.42857143;
}

.btn:hover {
  color: white;
  background-color: #68BB42;
  border-color: #adadad;
  background-position: 0 -5px;
}

.alt {
  background-image: linear-gradient(to bottom,black 0,blue 100%);

}

.btn:active {
  background-color: #279f43;
  background-image: none;
  border-color: rgba(27,31,35,0.5);
  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
}

<body>
  <button class='btn'> Primary </button>
  <button class='btn alt'> Secondary </button>
</body>

【讨论】：

【解决方案3】：

如果您没有使用预处理器，请考虑使用CSS custom properties 来存储您的颜色变量。

.btn {
  --primary-top: #15FF86;
  --primary-bottom: #68BB42;
  
  --secondary-top: #fcbfc4;
  --secondary-bottom : #811a08;
  
  text-align: center;
  color: white;
  text-shadow: 0 0 4px rgb(96, 96, 96);
  border: 1px solid #adadad;
  border-radius: 4px;
  padding: 6px 12px;
  background-repeat: repeat-x;
  box-sizing: border-box;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.42857143;
}

.btn:hover {
  background-position: 0 -5px;
}

.btn--primary {
  background-image: linear-gradient(to bottom, var(--primary-top) 0, var(--primary-bottom) 100%);
}

.btn--primary:hover {
  background-color: var(--primary-bottom);
}

.btn--secondary {
  background-image: linear-gradient(to bottom, var(--secondary-top) 0, var(--secondary-bottom) 100%);
}

.btn--secondary:hover {
  background-color: var(--secondary-bottom);
}

.btn:active {
  background-color: #279f43;
  background-image: none;
  border-color: rgba(27, 31, 35, 0.5);
  box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
}

<button class='btn btn--primary'> Primary </button>
<button class='btn btn--secondary'> Secondary </button>

Updated codepen

【讨论】：

您没有使用自定义属性的级联操作，因此您不会通过使用它们获得任何收益。此外，辅助按钮的 active 状态也不起作用。感谢您对自定义属性的提醒；看我的回答。

【解决方案4】：

如果您不想创建额外的选择器，您应该只使用 CSS 中的子选择器功能。

.btn:nth-child(1) { background:linear-gradient(#000, #0000ff); }
.btn:nth-child(2) { background:linear-gradient(#000, #ff0000);}

查看这个小提琴以获得完整的答案，希望这会有所帮助。

http://jsfiddle.net/yash009/vgexcj86/

【讨论】：

谢谢，但这并没有解决.btn:hover 和btn:active 取决于按钮最初着色以产生适当效果的颜色这一事实。这正确地改变了初始颜色，但因为 .btn:hover 从未被修改过并且不是变量 .btn:hover 适用于原始/初始颜色