如何制作一个对另一个类进行修改的 CSS 类？答案

【问题标题】：How can I make a css class that is a modification of another?如何制作一个对另一个类进行修改的 CSS 类？
【发布时间】：2017-05-13 12:59:52
【问题描述】：

我正在使用谷歌的 MDL 来制作一个简单的网站。我在网站上有很多按钮，在几个不同的页面上，我希望所有人都有相同的外观。起点是在按钮中包含一些 MDL 样式，如下所示：

<button class="mdl-button" style="..."/>

这很好，但我想在默认的 mdl 样式上为按钮添加一些附加功能。我想做类似的事情：

.my_button_style {
    ... include mld-button style
    ... include mdl-xxx style
    ... other css parameters here
}

我已经进行了一些挖掘，但似乎没有办法在使用标准 CSS（不使用 LESS 之类的东西）创建新的 CSS 类时继承其他 CSS 类的属性。

我觉得这很疯狂。

我在 MDL 网站上看到很多例子，例如：

<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">add</i>
</button>

如果您希望您的所有按钮看起来像这样，您真的必须将每一种样式添加到整个网站上的每个按钮实例吗？为什么 CSS 开发人员不拿着干草叉和火把进军山景城？我是否遗漏了一些非常明显的东西？

【问题讨论】：

AFAIK MDL 不是谷歌的东西。无论如何，将正交类全部应用于元素是一件好事，也是标准的 CSS 最佳实践。除其他外，它使 HTML 更具可读性，因为人们可以一眼看出正在应用哪些样式。
其实我相信是的。这是 Addy Osmani（Chrome 团队的工程师）的一篇介绍 MDL 的帖子，其中使用了这样的短语“今天我们正在努力将它带到使用 vanilla CSS、HTML 和 JavaScript 的网站。我们称之为 Material Design Lite (MDL) ).": medium.com/google-developers/…
我不相信你关于可读性的论点。一堆“mdl-button mdl-js-button mdl-button--fab mdl-button--colored”比简单地拥有一个清晰的自定义名称可读性要差得多。类已经模糊了具体应用了哪些样式，并且依赖于良好的命名实践来获得可读性。此外，任何时候您想更改整个网站的按钮样式，都必须在您网站上的所有 html 中查找和替换。
您没有解释“类似 LESS”的问题，因为在我看来这是解决您问题的完美方法。
AFAIK，只有使用预处理器，你可以包含这样的内容。

标签： html css material-design-lite

【解决方案1】：

使用标准 CSS 创建新的 CSS 类时，似乎无法从其他 CSS 类继承属性

没错。

很难证明某个特性不存在，但在任何 CSS 规范中搜索任何此类特性都是徒劳的。

由于您似乎反对任何涉及在 HTML 级别组合的正交类的设计理念概念，因此我不会花费任何额外的时间来尝试激发这种方法，或者证明从CSS 规范。

同时，您可能会查看https://tabatkins.github.io/specs/css-extend-rule/，但这不是我所知道的任何现有或提议规范的一部分。无论如何，这个提议的存在本身可以被视为“证明”@extends 在任何地方都不是 CSS 的一部分。

虽然我个人不推荐使用 SASS，但还有其他预处理器框架以不那么侵入性的方式提供 extends。如果您的应用程序已经使用任何类型的构建过程，则添加诸如预处理步骤根本不应该“繁琐”，并且可能只涉及在某些配置文件中添加几行。例如，您可以查看https://github.com/travco/postcss-extend。

【讨论】：

我认为严格的证明很少是 stackoverflow 问题的要求，在这种情况下当然不是。