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