Is there a reason CSS doesn't support applying styles from within styles?

Question

In CSS2 and even in the upcoming CSS3, I can't find something that would be completely natural and time-saving - applying CSS styles from within other styles, rather than from HTML.

For example:

.awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  .alwesome-image; // or something like that - this is similar to a function call in a functional language
  padding: 2px; 
}

Oftentimes, one doesn't have access to generated HTML, so modifying CSS is the only choice.

This sort of inheritance support would make life a lot easier because we'd be able to treat CSS rules as "functions" and reuse the code rather than duplicate it.

Or am I missing something and CSS does support this (I've never seen it before?) or plans on supporting it? Enlighten me please.

Edit: Consider another example which shows that declaring .awesome-image, .super-awesome-image {common rules} is not elegant:

.border5 {
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px
}

I would much rather not pile up every other class that would want to have a border radius in the same definition. Alas, that's what needs to be done without functional support (I mentioned a lot of times there's only access to the CSS file and not the HTML itself).

Answer 1

In CSS, this is achieved as follows:

.super-awesome-image, .awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  padding: 2px; 
}

Styles can be applied to multiple classes at once, which allows for easy inheritance.

There has been much debate as to whether CSS should be given functional programming techniques or layer inheritance, but this style of class inheritance will probably remain.

EDIT: If you can generate styles with php, such inheritance should be quite doable. Check out these scripts (which mostly deal with CSS variables, but may do more):

1. http://www.shauninman.com/archive/2005/08/05/css_variables
2. http://www.joesapt.net/2005/09/03/08.46.34
3. http://interfacelab.com/variables-in-css-via-php/
4. http://www.conditional-css.com/

Answer 2

• It would make recursion possible (which would mean parsers would need to be able to recover from it)
• Multiple rule-sets can use the same selector, so which one would apply? Or would all of them?

You can achieve what you want with:

<img … class="awesome-image super-awesome-image">

or

.awesome-image,
.super-awesome-image {
  border: 1px #000 solid;
  margin: 2px;
}

.super-awesome-image {
  padding: 2px; 
}

Answer 3

It kind of does support what you're suggesting, via the Cascade and inheritance. These are essential parts of CSS to understand, but they're sometimes a bit, er, idiosyncratic ...

Answer 4

I think the problem you mention is valid, but in those situations where the web programmer is completely separate from the web designer, it puts the onus on the initial project management to ensure both do what they're meant to. It's obviously a good philosophy to separate function and style, but there will always have to be some kind of link between the 2 and that is carried out by specifying the external CSS file(s). That's the reason it's important to define Id's and Class's carefully and always factor in some scope for change, i.e never make your CSS too general and always define ID's and Class's in the HTML for elements even when you're not styling them right now. It's a fine line to walk though between being pedantic and being careful, but then trying to think 6months/1year/5years ahead always would be ;)

This has always been my own personal approach.