CSS3 Rule weights

CSS3 uses the cascading set of rules and the !important keyword to
determine which style rule among many conflicting rules should apply to an
object/item.

However, with the heavy use of classes in css frameworks, the current
system might not be totally appropriate to address all use cases.

I'm proposing a new simple css rule-weight property which can be added to
any set of rules. The simple idea is that a set of rules with a heavier
weight should take precedence over lighter weights.

e.g.
..class1 {color:blue; font-size:1em; rule-weight:10}
..class2 {color:red; background-color:#b2b2b2; text-align:center;
rule-weight:50}

<div class="class1 class2">Hello World</div>

Here, for any rules defined in both class1 and class2, the rules in class2
would take precedence because class2 has a higher rule-weight than class1.

This should make working with stylesheets simpler and easier to understand