对元素应用多种CSS样式

I've been thinking about doing this:

我一直在考虑这样做:

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

Is there a way you can define a single class in CSS that comprises all these classes and then define the button to have the single class?

是否有一种方法可以在CSS中定义一个包含所有这些类的类，然后定义一个按钮来拥有这个类?

Like:

如:

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

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

吗?

3 个解决方案

#1

Very sadly, CSS doesn't allow that kind of thing. The 'CSS way' is to would put all relevant classes into the element's class attribute.

很遗憾，CSS不允许这样的事情发生。“CSS方法”是将所有相关的类放入元素的class属性中。

There are a few tools that allow you to write CSS in this style (eg Less), but you still have to run the tool on your 'shorter' CSS to generate the full CSS file that would end up on your site.

有一些工具可以让你以这种方式编写CSS(如Less)，但是你仍然需要在“更短的”CSS上运行这个工具来生成完整的CSS文件，这些文件最终会出现在你的网站上。

And in fact, these tools, because of the way they work, generally end up resulting in you actually having a larger CSS file in the end. So even though they can make your styles easier to work with when you're developing, if your aim is to reduce filesizes on your site, they're not the best option.

事实上，这些工具，由于它们的工作方式，最终会导致你有一个更大的CSS文件。因此，即使他们可以使你的风格在你开发的时候更容易使用，如果你的目标是减少你网站上的文件尺寸，他们不是最好的选择。

#2

No, nothing in CSS lets you reference another rule-set.

不，CSS中没有任何东西允许您引用另一个规则集。

#3

You could do something similar if you used something like LESS ( http://lesscss.org/ )

如果使用LESS (http://lesscss.org/)，您可以做类似的事情。

Example from their website:

示例从他们的网站:

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

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

There is also SASS (http://sass-lang.com/) and LessJS (http://github.com/cloudhead/less.js/tree/)

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

If you don't want to use these libs, there is no possibility to do such a thing using only CSS

如果您不想使用这些libs，那么不可能只使用CSS来完成这样的事情

#1