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

• 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; 
}