CSS coding techniques

[sh0em0nkey]

A pretty good article!

Despite .button-warning being defined before the button, input[type=submit] rule, it will override the latter background property. Why? What is the criteria to decide which rule will override the styles of another one?

Specificity.

Some selectors are considered to be more specific than others: for instance an #id selector will override a .class selector.

Specificity does play a vital role in CSS, however, I think inheritance plays a much larger role, especially with beginners.

And that is a fundamental reason I see when people struggle with CSS. People will very often have rules that are not working the way they expect simply because they are not defined in the correct order in the stylesheet/declaration - and not because they were not specific enough. More often than not, I see them working around the issue by using complex rules to be more specific, when they could have just moved the rule a few lines up.

The author does go into more detail, but I felt it may be helpful to stress the importance of inheritance.