overwrite css items depening on className - css

Question

I'm having problems with my CSS markup in my code.
I'm building a control and my plan is to add a standard class to it so it has a fixed layout and add any userdefined css classes behind it, to personalise the control. but during my tests I noticed a problem which I can't resolve.
when I have an element like this
<div class="test1 test2"></div>
and underlaying code in another stylesheet file.
.test1
{
width: 200px;
height: 200px;
background-color: red;
}
.test2
{
background-color: yellow;
}
then it doesn't matter if I put test1 first or test2. the div will always be yellow only because test1 is written last on the css file.
if I replace test2 with test1 in the css file itself then the div will always be red.
how can I make the background-color overwrite incase its added a second time depending on the order its written in the className itself?
I also want to take notice I don't want to force users to use the !important tag. I already know about this and yes that works fine but I need it without. Any ideas on how to resolve this issues is welcome. I'm open for alternatives

Answer 1

You could make it so .test2 when combined with .test1 becomes yellow
.test1.test2{
background-color: yellow;
}
a better way tough is not to work like this at all. have a read of this article instead. It explains a technique for CSS called BEM (Block, Element, Modifier) which is pretty awesome. When trying to modify a existing style it will look like:
.test{
width: 200px;
height: 200px;
background-color: red;
}
.test--warning{
background-color: yellow;
}
and your div will look like <div class="test test--warning">

Answer 2

You can twiddle the precedence of the class's selectors like this:
.test2[class*=test2]
{
...
}
This should make class test2 override other classes that have only class name selectors.
(sorry, this part is not correct)
If you want to lower test1's precedence, you could do it like this:
[class*=test1]
{
...
}
(I haven't tested this, you might need to name it *[class*=test1] instead)

Answer 3

I been researching for a long time and posted here because I couldn't find a good answer. thx to the answers and responses here I was able to find an article over the problem I'm facing here CSS howto
What I'm trying to do is not possible because of the order css in generated. What I wanted is my css to work between browser default and external or internal stylesheets. I will look for an alternative solution to my project.