Home

Naming

Components

Component naming should as swiftly as possible inform the following:

  1. Type
  2. Area/region in the app/site
  3. Purpose
  4. Context

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

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>

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

Repository

https://github.com/okeeffed/developer-notes-nextjs/content/principles/naming

Sections


Related