A Short Guide to Component Naming

1. As short as possible. But not shorter.

When it comes to naming components, brevity is key. Short names are easier to read, type, and remember. They also help keep your codebase clean and organized.

However, you should also avoid being too short. If your component name is too short, it can become ambiguous and difficult to understand. For example, a component named "Btn" could refer to a button, but it might not convey its specific purpose or context.

Instead, aim for a balance between brevity and clarity. Use descriptive names that convey the purpose of the component while still being concise. For example, “SignInButton” is a good name because it’s short, but it also clearly indicates what the component does.

2. Use a Consistent Naming Convention

Using a consistent naming convention is crucial for maintaining a clean and organized codebase. It helps your team quickly understand the purpose of each component and reduces confusion. For example, having a button component named PrimaryButton and another called ButtonMain creates inconsistency that can lead to confusion and wasted time as developers try to figure out which component to use.

Establish clear patterns early in your project. If you use PascalCase for component names, stick with it throughout. If you prefix components by their type (Button, Input, Modal), apply this pattern consistently across your entire component library.

3. Use one language

If your business is not based in an English-speaking country, it can be tempting to use your native language for domain names and English for everything else. However, this can lead to confusion and inconsistency in your codebase. It’s best to stick to one language for all component names, preferably English, as it’s the most widely used language in the tech industry.

However, if your team is more comfortable using another language, it’s important to ensure that everyone is on the same page and that the naming convention is consistent across the codebase.