A Short Guide to Component Naming
by Mohammad Tommalieh, Senior Frontend Engineer
1. Clarity and Purpose
When naming components, focus on creating descriptive names that clearly communicate the component's purpose and functionality. Choose names that will make sense to other developers and your future self.
For example, instead of "btn", use "SubmitButton" or "NavigationButton". Rather than "md", use "ConfirmationModal" or "SettingsModal". Clear naming reduces cognitive load and makes the codebase more maintainable.
2. Consistent Naming Patterns
In large codebases, establishing and following consistent naming patterns is essential. This helps team members quickly understand and locate components.
Use descriptive but concise names that follow your team's conventions. For example, "SignInButton" clearly indicates both the purpose (sign in) and the type of component (button). Avoid overly long names that include unnecessary implementation details.
3. Standardize Language
When working on international teams, it's important to establish a standard language for component naming. English is typically used as the common programming language to ensure consistency and clear communication across the team.
Maintain documentation that explains component naming conventions and consider adding comments in multiple languages if needed. This approach maintains code clarity while still supporting global collaboration.
