将多个CSS样式应用于一个元素

Question

我一直在考虑做这件事：

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">Blah</button>

有没有一种方法可以在CSS中定义一个包含所有这些类的单个类，然后将按钮定义为具有该单个类？

例如：

.myclass {ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only}

<button class="myclass">Blah</button>

?

- Marcus Leon

Answer 1

不，CSS 中没有任何东西能够引用其他规则集。

- Quentin

Answer 2

如果你使用类似LESS的东西（http://lesscss.org/），你也可以做类似的事情。

以下是他们网站上的示例：

.rounded_corners (@radius: 5px) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

还有SASS (http://sass-lang.com/) 和LessJS (http://github.com/cloudhead/less.js/tree/)。

如果您不想使用这些库，仅使用CSS无法实现此功能。

- marcgg

Answer 3

非常遗憾，CSS不支持这种类型的操作。"CSS方式"是将所有相关类放入元素的class属性中。

有一些工具可以让您以这种方式编写CSS（例如Less），但您仍然需要在“较短”的CSS上运行该工具，以生成最终出现在您网站上的完整CSS文件。

实际上，由于它们的工作方式，这些工具通常会导致您最终拥有一个更大的CSS文件。因此，即使它们可以让您在开发时更轻松地处理样式，如果您的目标是减小网站文件大小，它们并不是最佳选择。

- Spudley