Applying multiple CSS styles to an element

Question

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?

Like:

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

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

?

Answer 1

You could do something similar if you used something like 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/)

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

Answer 2

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

Answer 3

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.

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.

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.