Can I join 2+ styles together into a superstyle?

Question

Hi

I was looking to join 2 styles together to make a super style for easy use and customisation of my page.

Is it possible to define something like this? (if so how)

.bold { font-weight: bold;}
.color1 {color: white;}

.boldColor {.bold; .color1;}

where .boldColor is effectively

.boldColor {font-weight:bold; color:white;}

I want this so that I can have styles thoughout the page and be able to easily change the colors in many places in 1 place. I'm currently using <p class="bold color"> but some of my class defs are becoming long so I'd like to be able to use <p class="boldColor">

Thanks

Answer 1

No, the CSS spec does not support this.

Answer 2

This is not possible using normal CSS. You would usually do this, as you already say, by combining class names: bold color

There are CSS "pre-compilers" that can do advanced things on CSS stylesheets, like working with variables. I don't know of any that does "class fusions" like you request but I'm sure they can be helpful in reducing code size. Check out LESS and xCSS, for example.

Answer 3

You can't do exactly what you are asking for but you can get similar effects by using a comma to separate multiple css selectors that share the same properties.

.bold, .boldColor {
    font-weight: bold;
}

.color1, .boldColor {
    color: white;
}

This way class="boldColor" will have the same effect as class="color1 bold".

Answer 4

No you cannot do this. How you are doing it currently is ideal.

Answer 5

Check out LessCss (.NET version)