Working on a project the other day I came across a problem with some existing CSS where the selectors for basic elements all included the ID’s for the layout containers.
#main #content #inner h3
this was causing huge problems when any external mark-up was dropped into the page. The generic styles were already so specfiic that they were over-riding most other CSS styles. Before you know it you needed to tag everything with:
#main #content #inner #something .get .my .point
to make the styles to cascade properly.
It’s worth remembering that although
#main #content a {color:black}
looks fairly innocuous but when you later to need to change the style of an anchor tag you’ll be stuck needed to add a lot of specification and worse external mark-up, unaware of your overly described selectors will end up being overridden. Before you know it your rules are flowing off the page and every new change requires a train of selectors, tags and classes.
It’s worth then noting how CSS decided what styles to use – Other people have done a better job than I would manage so I’ll just point you towards a few articles that cleverly explain the problem:
http://iamacamera.org/default.aspx?id=95
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Enjoy!