Entry Post

Entry Module
Entry
Main Post Title

Generic Class Names and IDs

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
Comments

There are no comments.

Comment Creation
Compose Comment