Designation of IDs and classes

HTML should contain so-called classes, especially to abstract the design of structure and content. The classes, invisible to website visitors, serve to classify elements, sections, areas etc.

The designer of a website can then use style sheets to select the classes and format others. Classes are only necessary if it is also a classification to distinguish elements, sections, areas etc. A common mistake is the classification of all elements of one type, which does nothing and makes the HTML and CSS code unnecessarily longer, more complicated and more difficult to understand. This is sometimes also called "classitis", compare e.g.
http://www.bs-markup.de/blog/archiv/2005/06/30/dr-css/

Another typical mistake is the wrong naming of classes. Examples of incorrect naming:

• "FooterBlue": Here are two errors included: Firstly, an HTML document should only contain one footer (which can contain several sub-sections). In this case the footer should contain an ID for identification and no class. The ID should be "Footer" or similar in this case. However, this is not a meaningful name for a class.
  Secondly and even more important than the first error is the use of the designation "Blue". Here, instead of abstracting, the colour of an object is already defined in concrete terms. In case of a redesign or even a small adjustment of the colours, the HTML output must now be adjusted instead of just the CSS files. This is much more complex and tedious. In addition, the designer may not even have the necessary permissions or knowledge. Such designations should be avoided in any case.

• "Head": In this example Head stands for heading. Headings, however, have tags already assigned in HTML, namely: h1-h6. These should always be used for accessibility, search engine optimisation, clarity, independence from style sheets etc. When using h1-h6 an additional classification is absolutely unnecessary and confusing. At the same time it inflates the HTML code of the website unnecessarily.

• "XYClass": It is recommended not to use the term "Class", because the position obviously indicates that it is a class and now the name should be defined.

Below are some good examples of class names. Others can easily be derived by following the rules mentioned above.

• "StartPage": Allows a different formatting on the start page than on following pages. Attention: do not define this class on all elements, but right at the beginning of a document and only once.

• "Button": Buttons cannot be selected separately from most other form elements, especially for Internet Explorer. As long as this is the case, this "trick" will help.

• "parent": In lists for the designation of parent elements.

• "selected": In lists for the designation of selected elements.

The rules mentioned above that apply to classes also apply to IDs.

It is especially recommended not to use colours in ID names!