Entry Post

Entry Module
Main Post Title

Generic Class Names and IDs

Post Header Aside
Comments Actions Snippet
Comments Population
Comment Creation

Post Content

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

– adjective

    • colon_label – colon
    • comma_label
    • info

Standalone Generic Class Names

  • comp
  • nav
  • axn-comp

List of IDs

  • comments
Comment Module
Comments Actions Snippet
Comments Population
Comment Creation

There are no comments.

Comment Creation
Compose Comment