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:Hook naming
Combine ‘use’, action, and resource for clarity. Good Practice:Function Naming
Function names should clearly indicate their purpose and action. Good Practice:PascalCase
Used for class names, constructor functions, and React component names.Type Naming: UserProfile
Good Example:
Interface Naming: UserSettings
Good Example:
snake_case
Commonly used for database fields and table names.Database Schema Naming
Tables Naming: Good Practice:UPPER_CASE_SNAKE_CASE
Used for constants and environment variable namesConstants
Good Practice:Environment Variables
Good Practice:kebab-case
Used for CSS class names and URL slugs.CSS Class Naming
Good Practice:Other Naming Conventions ✨
Configuration Files
Configuration file names should indicate their purpose and the environment they’re used in. Good Practice: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.
Recommend using
kebab-case
for folder names.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.snake_case
, kebab-case
, or inconsistent capitalization in component filenames.
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
- Using CamelCase
Recommendation 📌
Decide whether to usekebab-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 ScenariosCase 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) |