Naming

Components

Component naming should as swiftly as possible inform the following:

To do it in such a way that is purposeful and scalable, consider following the naming by going [Type][Region][Purpose][Context].

Deep dive

For example, let's take the unknown customer journey . In this flow, they go from home, cover the common basics between the customer journeys for identifying if they are a member, the store location, the order and the type before moving on to the specific journey feedback. When building out the individual pages, we can determine and define a type, region, purpose and context.

// [Type][Region][Purpose][Context]
1. PageHome // -> selects "Leave Feedback"
2. PageBaseIsMember // -> Type: Page, region: Base, purpose: Is, context: Member, selects no
3. PageBaseSetStore // -> Type: Page, region: Base, purpose: Set, context: Store, selects continue
4. PageBaseSetOrderType // -> Type: Page, region: Base, purpose: Set, context: Order Type
// etc
copy

Note that you can emit purpose and context from the name if it is not relevant.

Within each page, you can individual components. Try to use the class name convention to generate the names for child components:

// ! This is just an example and not necessarily
// reflective of actual use. Use your own discression.
<PageBaseSetOrderType>
  // Compoent for each order type
  <ComponentOrderTypeRadio />
  <ComponentOrderTypeRadio />
  <ComponentOrderTypeRadio />
  <ComponentOrderTypeRadio />
</PageBaseSetOrderType>
copy

Class Names

Try follow the convention below for naming classes.

body:
  header: # @classname header
    # @children
  # Top level for each section
  section: # @classname section-name
    # @children
    container: # @classname container-name
      # Base selection of rules
      ? block
      # @children
      grid:
        ? grid-item
        # @children
      table:
        # @children
        table-header:
          # @children
        table-data:
          # @chidlren
      list:
        # react native only
        list-item:
          # @children
      # ... more, maybe article etc
      nav:
        nav-item:
          # @children
  component: # @classname component-name
    # Specific component based styling
    # @children
    # Base selection of rules
    ? block
    # @children
    grid:
      ? grid-item
      # @children
    table:
      # @children
      table-header:
        # @children
      table-data:
        # @chidlren
    list:
      # react native only
      list-item:
        # @children
    # ... more, maybe article etc
    nav:
      nav-item:
        # @children
  footer: # @classname footer - but maybe should be more specific
    # @children
copy