html - 我怎样才能制作一个修改另一个的CSS类？

Question

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

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

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

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

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

我觉得这很疯狂。

我在 MDL 网站上看到很多示例，例如:

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

如果您希望所有按钮看起来都像那样，您真的必须将每一种样式添加到整个站点的每个按钮实例吗？为什么 CSS 开发人员不带着干草叉和 torch 前往山景城？我是否漏掉了一些非常明显的东西？

Answer 1

It appears that there is no way to inherit properties from other CSS classes when creating a new one, using standard CSS

没错。

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

由于您似乎抵制任何涉及在 HTML 级别组合的正交类的设计哲学概念，我不会花任何额外的时间来尝试激发这种方法，或证明“遗漏”扩展类的合理性CSS 规范。

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

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