Naming Conventions in Software Development

Explore best practices for naming files, functions, variables, and more in software development, with examples of good and bad practices.

Adopting effective naming conventions is crucial in software development for ensuring code clarity, maintainability, and ease of collaboration. This guide covers various aspects of naming, from file names to constants, providing guidelines for best practices.

CamelCase

Used for object keys, function names, React state variables, and more.

Object Naming

State object keys should be descriptive and follow camelCase.

Good Practice:

{
  firstName: "",
  lastName: "",
  paymentId: "",
}

Bad Practice:

{
  first: "",        // Not descriptive
  lname: "",        // Inconsistent naming
  id_payment: "",   // Mixed naming styles
}

Hook naming

Combine ‘use’, action, and resource for clarity.

Good Practice:

function useLocalStorage() { /* ... */ }
function useClickOutside() { /* ... */ }

function useGetUserProfileAPI() { /* ... swr api function */ }
function useUserLoginAPI() { /* ... swr api function */ }

Bad Practice:

function getUserProfile() { /* ... */ }   // Not clear it's a hook
function loginAPI() { /* ... */ }         // Should start with 'use' and describe action

Function Naming

Function names should clearly indicate their purpose and action.

Good Practice:

function handleChange() { /* ... */ }
function handleSubmit() { /* ... */ }
function getUserProfileAPI() { /* ... */ } // REST API Call Function

Bad Practice:

function handle() { /* ... */ }             // Too vague
function submitData() { /* ... */ }         // Verb should come first

PascalCase

Used for class names, constructor functions, and React component names.

Type Naming: UserProfile

Good Example:

type UserProfile = {
  id: number;
  name: string;
  email: string;
};

Bad Example:

type user_info = {
  userid: number;
  username: string;
  useremail: string;
};

Interface Naming: UserSettings

Good Example:

interface UserSettings {
  theme: string;
  notifications: boolean;
}

Bad Example:

interface settings {
  Theme: string;
  NotificationsEnabled: boolean;
}

snake_case

Commonly used for database fields and table names.

Database Schema Naming

Tables Naming:

Good Practice:

tbl_users
tbl_payment_history

Bad Practice:

usersTable          // Prefix 'tbl_' makes it clear it's a table
paymentHistory      // Lacks prefix

Table Fields Naming:

Good Practice:

first_name
last_name
email_address

Bad Practice:

FirstName           // Use snake_case for database fields
last name           // Avoid spaces; use underscores
emailAddress        // Stick to one case style, preferably snake_case

UPPER_CASE_SNAKE_CASE

Used for constants and environment variable names

Constants

Good Practice:

const MAX_RETRY_COUNT = 3;
const DEFAULT_TIMEOUT = 1000;
const API_BASE_URL = 'https://api.example.com';

Bad Practice:

const maxRetry = 3;              // Should be uppercase
const DefaultTimeout = 1000;     // Should not use camelCase or PascalCase
const ApiBaseUrl = 'https://...';// Constants should be in uppercase

Environment Variables

Good Practice:

DATABASE_URL
ACCESS_TOKEN_SECRET
REDIS_PORT

Bad Practice:

dbUrl            // Not uppercase
accessToken      // Should use underscores to separate words
RedisPort        // Not following the uppercase convention

kebab-case

Used for CSS class names and URL slugs.

CSS Class Naming

Good Practice:

.btn-primary
.btn-secondary

Bad Practice:

.btnPrimary
.btnSecondary

Other Naming Conventions ✨

Configuration Files

Configuration file names should indicate their purpose and the environment they’re used in.

Good Practice:

development.config.js
production.config.js
test.config.js

Bad Practice:

configDev.js              // Inconsistent naming
prodConfig.js             // Ambiguity in file purpose
test_conf.js              // Mixing naming styles

Certainly! Let’s include examples for folder naming conventions as well. In software development, folder names are typically given in PascalCase or kebab-case, depending on the project’s convention. Here’s how I would incorporate this into the document:

---

Folder Naming

Folder names should be clear, consistent, and indicative of their contents. Depending on the project’s convention, PascalCase or kebab-case can be used.

Recomend using kebab-case for folder names.

PascalCase for Folder Naming

Good Practice:

Components/
Utilities/
AuthPages/
UserProfile/

Bad Practice:

components/          // Should be PascalCase for consistency
utilities_folder/    // Should not mix cases or use underscores
auth-pages/          // Should use either kebab-case or PascalCase consistently
UserProfilePage/     // Redundant 'Page' suffix in a folder name

kebab-case for Folder Naming

Good Practice:

components/
utilities/
auth-pages/
user-profile/

Bad Practice:

Components/          // Should be lowercase for kebab-case
utilitiesFolder/     // Should use dashes, not camelCase
Auth_Pages/          // Avoid mixing case styles and underscores
UserProfilePage/     // Redundant 'Page' suffix and incorrect case style

File Naming Conventions

File naming conventions organize and simplify your code, making it easier for teams to navigate. This guide emphasizes best practices for naming React components and files such as hooks and utils. It also warns against common mistakes to keep your project clear and consistent.

Component Files (JSX/TSX)

| Good Practice ✅

React component files should be named using PascalCase.

UserProfile.jsx
InvoiceList.tsx

| Bad Practice ❌

Avoid using snake_case, kebab-case, or inconsistent capitalization in component filenames.

user_profile.jsx     // snake_case
invoice-list.tsx     // kebab-case
userprofile.js       // all lowercase

Hooks/Utils/Other JS or TS Files

For non-component files, you have the option between kebab-case and camelCase. The key is to maintain consistency throughout the project. Choose one style and stick with it.

| Good Practice ✅

• Using Kebab-Case

use-user-data.js
format-date.ts
user-types.ts

• Using CamelCase

useUserData.js
formatDate.ts
userTypes.ts

| Bad Practice ❌

Mixing naming conventions within the same project or using unconventional casing can lead to a cluttered and confusing codebase.

useUserData.js       // CamelCase mixed with...
format-date.ts       // kebab-case in the same project

UseUserData.js       // PascalCase for non-component files
formatDate.TS        // Inconsistent file extension casing

Recommendation 📌

Decide whether to use kebab-case or camelCase for naming hooks, utilities, types, and other similar files in your project. Do not mix these conventions within the same codebase.

The choice may depend on team preferences, the specific needs of the project, or existing conventions in related projects. Remember, consistency is paramount.

---

Programming Case Styles Cheat Sheet📘

Quick Reference for Naming Conventions in Different Programming Scenarios

Case Style	Usage
camelCase	Object keys, function names, variables, React state variables, method names in classes
PascalCase	Class names, constructor functions, React component names, interface names (in languages like TypeScript)
snake_case	Database fields, database table names, variable and function names in Python
kebab-case	CSS class names, file names, URL slugs
UPPER_CASE_SNAKE_CASE	Constants, environment variable names
Hungarian Notation	Prefixing variable names with type indicators (less common)

Conclusion

Adopting clear and consistent naming conventions enhances the overall quality of your codebase, making it more accessible and easier to maintain. By following these guidelines, you’ll foster a more efficient and collaborative development environment.