What is the best way for css rules name?

Question

Many ajax calls means you are getting content from different template views. In this case some ids could be repeated. So I am wondering about best logic how to name style rules. I am currently deciding between two options:

• Add a prefix to each id. Each selector will look like #templateName-idName
• Wrap each template to a div with template name id. So each selector will start with #templateName #idName

What is your opinion about this. Is it a good idea to sepearate absolutely every id with some prefix?

Answer 1

Using some form of psuedo namespace like prefixes for ids is a good idea to prevent collisions. From a CSS standpoint you should be trying to create more re-usable/consistent styling rules, and therefore generally avoid the use of ids for anything more than site structural elements and one off fixes. A combination of explicit class/id markers and combinator selectors should lead to clearer and more maintainable stylesheets. As far as ids go that would make the combined #container-child convention preferable for the initial namespacing reason and also to emphasize and take advantage of the uniqueness of ids.