With CSS, how to style a generic, global style?

Update: this question is about global style. So solution such as #some-id .score is NOT a solution.

At first, I was styling as

.score { font-size: 32px; color: #777开发者_如何学Python }

And the "score" is something that can happen any where, something of a global style. But since other style actually might have:

#summary-panel { font-size: 13px }

The one with id will override the one just having classes (the first CSS rule in this post). (So if score is displayed within summary-panel then the font-size will be overridden to be 13px but the score style is supposed to be global and need a 32px style.) So I was tempted to use

.score { font-size: 32px !important; color: #777 !important }

because the !important can act as the "second level" which override everything ordinary, and act as a global style.

Is this a good way or better way? One catch is that if sometimes we might have a CSS issue with IE 7 (or IE 6), that we need a separate stylesheet such as ie.css, and in there, there might be also

#summary-panel { font-size: 12px !important }

so in this case, the !important will be overridden because the one having an id will always win over just classes. So is there a better way?

Maybe this?

#summary-panel.score { font-size: 32px; }

I guess I'm not sure how many styles you want to add or if the question is how to do this without adding any new styles, in which case I'd say there is not a better way.

This is where you use span.

For example the markup:

<div id="sometext">
   <p>Lorem ipsum <span class="score">test</span> dolor sit amet</p>
</div>

And the CSS:

div#sometext {
    font-size: 12px;
    color: yellow;
}

span.score {
    font-size: 42px;
    color: green;
}

this question is about global style. So solution such as #some-id .score is NOT a solution

[...]

.score is NOT a solution So is there a better way?

there is no answer, all the comments you got in the first answer are valid and polite, but I would tell you as a user, that you should not use !important unless in an emergency to override external code that is outwith your control, !important is for user styles

CSS is a mindset, a suggestion, your request (with a please ;) to the browsers how you would like your styles displayed - at the minute you seem to be struggling between the mindsets

The logical programmer side wants a "global" style, and I believe most programming languages have "globals" ? CSS is not a programming language it's a markup language.

Anyway, the recent last 3-4 years CSS'ers have been encouraged to "class everything" YUI and Blueprint and other frameworks would have us do so.. but that means you should not use ID's because as you rightly point out they override.. they are the ultimate in the CSS Specificity Wars.. BUT as an efficient CSS coder you need to use ID's - that is best practice isn't it? - so if you do need to mix them then you should group your ID selectors and if necessary group the class selectors as was suggested to you

there really is no answer here (except there no such thing as global styling unless you pass it down via ID's and inheritance, it's a coding preference rather than a right/wrong answer