Design tokens, components and variables

Naming design tokens, components, and variables is crucial for maintaining a clean, understandable, scalable codebase. Here are some best practices:

Design Tokens

Design tokens are named entities that store design decisions, such as colors, typography, spacing, etc. They bridge the gap between design and code.

1. Consistency: Use a consistent naming convention throughout your tokens.
   • Example: color-primary, font-size-small
2. Descriptive and Clear: Names should describe the purpose or usage of the token.
   • Example: color-background-primary, spacing-small
3. Hierarchy: Reflect a clear hierarchy, especially for tokens used in multiple contexts.
   • Example: button-color-primary, button-color-secondary
4. Avoid hard coding: Do not tie names to specific values to allow flexibility.
   • Example: color-primary instead of color-blue
5. CamelCase or kebab-case: Stick to a casing style that fits your team’s conventions.
   • Example: font size large (CamelCase) or font-size-large (kebab-case)

Components

Components are reusable building blocks of your application. Naming should reflect their purpose and context.

1. Meaningful Names: Names should indicate the component’s function and scope.
   • Example: UserCard, NavigationMenu
2. PascalCase: Use PascalCase for component names.
   • Example: ButtonPrimary, UserProfile
3. Modular and Scoped: If components are nested or scoped, reflect this in the name.
   • Example: HeaderLogo, FooterLinks
4. Avoid Abbreviations: Full names are better than cryptic abbreviations for clarity.
   • Example: SidebarMenu instead of SbMn
5. BEM Methodology: For complex components with states or variations, consider BEM (Block Element Modifier).
   • Example: Button–primary, Card__title

Variables

Variables hold data or references used in your code. Their names should be intuitive and descriptive of their content or purpose.

1. Descriptive and Specific: Variable names should describe the content they hold or the role they play.
   • Example: userAge, isAuthenticated
2. LowerCamelCase: Use lowerCamelCase for variable names.
   • Example: firstName, totalPrice
3. Avoid Magic Numbers/Strings: Use variables instead of hard-coding values.
   • Example: const maxRetries = 5; instead of const retry = 5;
4. Contextual Naming: The name should make sense within the context of its use.
   • Example: isUserLoggedIn in authentication context, buttonDisabled in UI context
5. Short but Clear: While brevity is good, clarity should not be sacrificed.
   • Example: totalAmount instead of ta

General Tips

1. Consistency: Regardless of your naming, consistency across your project is key. Agree on a naming convention with your team and stick to it.
2. Documentation: Maintain a naming convention guide in your project documentation.
3. Review: Regularly review names for clarity and consistency during code reviews.
4. Refactoring: Don’t hesitate to refactor names if they become misleading as the project evolves.

Adhering to these best practices can help you create a codebase that is easy to read, maintain, and scale.