Here is the summary I've recently learnt from discussions on this site (and similar) of 4 basic rules, so please correct me if I'm wrong or misunderstood something:a) Don't use IDs in CSS (or use it as few as possible)b) Use as many descriptive elements as possible such as article, section  instead of div c) Name classes according to the content, not appearance d) Don't use too many classes: Don't give elements a class just because you can. It adds noise. (I don't know how to achieve this one though, because almost every element needs a class. If it's a section, there is another section elsewhere with different looks. Same goes for the article, etc.)This is kind of philosophical question, but the goal is to set some things straight for all readers to benefit; having constantly in mind the rule of separation of content and presentation.
Basic semantic rules of CSS (and HTML), right or wrong?
html;css;html5
a) Use as many as you need but IDs are there for a reason and can serve a purpose. The problem with IDs is the same one might have with global variables in javascript. That one may forget the ID is used on another page causing problems cross-page while coding.I agree with b and c.d) will require more thought on my part but this can venture into personal preference and opinion more than fact.To explain d) further, there are a lot of considerations about class usage for descending elements. Some may say all elements should have a unique class name so you can reference them directly for ease of use and speed of operation like so:.myclass{}.myclass_statement{}.myclass_statement--highlight{}Others say only one parent element needs a class name and we should continue with descendant selectors such as .myclass {}.myclass p {}.myclass p span {}In the first case, things can get verbose but, in the second case, you have to be concerned that someone may add a property to all span elements you aren't aware of and, thus, have a problem with the cascading of properties and specificity. At one time, there was concern over speed of operation by the second method because browsers evaluate from right to left but this may have diminished in Chrome (at least. Not sure about other browsers).