CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152687

Is using css class always a better idea to get rid of style overriding problems?

Is using css .class in place of #id always a better idea to get rid of style overriding problems and iimportant?

#content ul li a {font-size:10px}

#content .demo ul li a {font-size:15px}

Upvotes: 2

Views: 97

Answers (3)

Adam Hopkinson
Adam Hopkinson

Reputation: 28795

A class won't always override an ID - given two conflicting rules for the same element, the browser will calculate a score for each rule based on the specificity of the rule. Each part of the rule is awarded points, then the rule with the most points applied.

  • html selectors (div, p, etc) are +1
  • class selectors (.class) are +10
  • id selectors (#id) are +100

So for your example:

#content ul li a {font-size:10px} = 100 + 1 + 1 + 1 = 103
#content .demo ul li a {font-size:15px} = 100 + 10 + 1 + 1 + 1 = 113

Hope that helps

Upvotes: 1

Pekka
Pekka

Reputation: 449485

No, I think it isn't. IDs should be used for unique elements only that are going to be addressed using JavaScript IMO.

They have higher specificity than classes when the importance of a CSS rule is calculated but that is no argument for using them.

Upvotes: 0

phpBOY
phpBOY

Reputation:

id is the identifier and ideally it should be used only for one element whereas class can be used multiple times for multiple elements.

SEE: Id vs Class

Upvotes: 2

Related Questions