Generic Class Names

The main idea behind generic class names is to have a standard naming convention for common HTML patterns and attaching it to specific class names.

For example, here’s a simple HTML markup of Skip Link component:

<div class="comp skip-link_comp">
    <a class="skip-link_axn" href="#content">Skip to content</a>
</div><!-- skip-link_comp -->

Notice that there are two generic class names attached to specific class names:

• comp – short for component
• axn – short for action

Only comp is suggested to have a separate class name for CSS debugging purposes.

The syntax is: specific-name_generic-name

List of Generic Class Names

• comp – component
• cr – container
• ct – content
• hr – header
• name – title or heading
• desc – description
• grp – group or parent of number of items
• item – part of a number of items
• accessible-name – official name
• friendly-name – custom displayed name
• nav – navigation
  • nav-grp
  • nav-item
• axn – action
  • axn-grp
  • axn-item
• notice – notification message
• datetime – time
• sep – separator, divider
• label
  • pred_label – (predicate) verb part of a label or phrase; e.g., in the phrase “Edit Entry”, “Edit” is the predicate
  • subj_label – (subject) noun part of a label or phrase; in the example above, “Entry” is the subject
  • prep_label – preposition
  • verb_label
  • noun_label
  • adj_label
• form
  • field
  • field_cr
  • field-axn
  • field-axn_cr

• colon_label
• comma_label
• info