Naming Conventions

Consistent naming conventions are critical for maintaining readable, scalable, and maintainable code. This document outlines best practices for naming variables, functions, files, and other elements in a modern frontend project.

General Guidelines

Be Descriptive: Use clear and meaningful names that describe the purpose of the element.
Use CamelCase for JavaScript: Follow camelCase for variables, functions, and object properties.
Avoid Abbreviations: Write full, meaningful names instead of cryptic abbreviations.
Stay Consistent: Use the same naming patterns across the entire codebase.
Prefix Booleans: Start boolean variables with is, has, or should (e.g., isVisible, hasAccess).
Avoid Reserved Words: Don’t use JavaScript reserved keywords as identifiers.

Naming Variables

Do

const userName = 'John Doe';
const totalItems = 42;
const hasPermission = true;

Don’t

const x = 'John Doe';
const t = 42;
const flag = true;

Constants

Use UPPER_SNAKE_CASE for constants:

const MAX_RETRY_COUNT = 5;
const API_BASE_URL = "https://api.example.com";

Naming Functions

General Guidelines:

Use camelCase.
Start function names with verbs to indicate action.

function fetchUserData() {
  // Fetch user data from API
}

function calculateTotalPrice(items) {
  // Calculate the total price of items
}

Naming Files and Folders

Use kebab-case for file and folder names:
```
component-header.js
user-profile.js
```

Group related files into folders:

components/
    header.js
    footer.js

Use index files for central exports:

components/
    header.js
    footer.js
    index.js // Central export file

Naming Components (React)

File Names

Use PascalCase for React component file names:
```
UserProfile.jsx
Header.jsx
```

Component Names

Use PascalCase for component names:

function UserProfile() {
  return <div>User Profile</div>;
}

export default UserProfile;

Naming CSS Classes

Use BEM (Block-Element-Modifier) Convention

Block: Represents the parent component.
Element: Represents a child element of the block.
Modifier: Represents a variant or state of the block/element.

Example

<div class="button button--primary">
  <span class="button__icon"></span>
  Click Me
</div>

Explanation:

button: Block
button__icon: Element
button--primary: Modifier

Naming State Variables (React)

Use Descriptive Names

const [userData, setUserData] = useState(null);
const [isLoading, setIsLoading] = useState(false);

Avoid Generic Names

const [data, setData] = useState(null); // Avoid
const [state, setState] = useState(false); // Avoid

API Endpoints

Use snake_case for API endpoint paths:

GET / api / users;
POST / api / users / create;

Avoid mixing conventions:
```
GET / api / getUsers; // Avoid
```

Database and Backend Naming

Use snake_case for database tables and columns:

CREATE TABLE user_profiles (
  user_id INT PRIMARY KEY,
  first_name VARCHAR(100),
  last_name VARCHAR(100)
);

Key Takeaways

Be consistent with naming conventions throughout the codebase.
Prioritize readability and clarity.
Use naming conventions that align with your project’s language and frameworks.