A cross-stack, reference-ready naming guide that stitches together industry style guides (Airbnb, Google, PostgreSQL, etc.) into one coherent system. This will serve as a cheat sheet you and your team can apply directly.

Naming Conventions.md

🌐 Comprehensive Naming Conventions Guide for Modern Web Projects

HTML / HTML5 Naming Conventions

Elements............ Lowercase, semantic where possible         
                     Example: `<header>`, `<section>`, `<article>`      

Attributes.......... Lowercase, hyphen-separated                
                     Example: `data-user-id`, `aria-label`              

id.................. kebab-case, unique                         
                     Example: `main-header`, `user-profile-form`        

class............... kebab-case, descriptive, BEM for complex UI
                     Example: `btn-primary`, `card__header--highlighted`

name................ snake_case for form inputs                 
                     Example: `first_name`, `user_email`                

CSS & SCSS Naming Conventions

Classes............. kebab-case, optional BEM          
                     Example: `.btn-primary`, `.nav-bar__item--active`    

IDs................. kebab-case, use sparingly         
                     Example: `#site-header`                              

Variables........... SCSS: kebab-case prefixed with `$`
                     Example: `$primary-color`, `$font-size-lg`           

Mixins.............. kebab-case prefixed with `@mixin` 
                     Example: `@mixin flex-center`, `@mixin text-truncate`

JavaScript (ES6+) Naming Conventions

Variables........... camelCase                                           
                     Example: `userName`, `isLoggedIn`                

Constants........... UPPER_CASE with underscores                         
                     Example: `API_BASE_URL`, `MAX_RETRIES`           

Functions........... camelCase                                           
                     Example: `getUserData()`, `handleClick()`        

Classes............. PascalCase                                          
                     Example: `UserProfile`, `ShoppingCart`           

Files............... kebab-case                                          
                     Example: `user-service.js`, `auth-controller.js` 

Modules/Exports..... camelCase for single exports, PascalCase for classes
                     Example: `export function fetchData()`           

TypeScript Naming Conventions

Interfaces.......... PascalCase prefixed with `I` (common in enterprise TS, but optional)
                     Example: `IUser`, `IProductService`                        

Types & Aliases..... PascalCase                                                          
                     Example: `type UserID = string;`, `type UserRole = "admin" | "guest"` 

Generics............ Single uppercase letter, descriptive if complex                     
                     Example: `<T>`, `<K, V>`, `<Response>`                     

Classes............. PascalCase                                                          
                     Example: `AuthService`, `UserRepository`                   

Enums............... PascalCase name, UPPER_CASE members                                 
                     Example: `enum UserRole { ADMIN, GUEST }`                  

JSON & Web APIs Naming Conventions

Keys................ snake_case (for API payloads)                    
                     Example: `{ "user_id": 1, "created_at": "..." }`       

Nested keys......... snake_case                                       
                     Example: `{ "user_profile": { "first_name": "..." } }` 

URLs................ kebab-case for paths, snake_case for query params
                     Example: `/api/v1/user-profile/123?include_posts=true` 

Vue.js Naming Conventions

Components.......... PascalCase                              
                     Example: `<UserCard />`, `UserProfile.vue`                              

Props............... camelCase in JS, kebab-case in templates
                     Example: `props: { userName: String }` → `<user-card user-name="..." />`

Directives.......... kebab-case                              
                     Example: `v-if`, `v-model`                                              

Vite Naming Conventions

<br

Config files........ kebab-case 
                     Example: (`vite.config.js`)

Plugin names........ kebab-case 
                     Example: (`vite-plugin-compress`)

Rationale........... Matches npm ecosystem norms.

Node.js Naming Conventions

Variables........... camelCase 
                     Example: `userService`, `dbClient`              

Files............... kebab-case
                     Example: `auth-controller.js`, `user-service.js`

Folders............. kebab-case
                     Example: `/controllers`, `/middlewares`         

PostgreSQL Naming Conventions

Tables.............. snake_case plural   
                     Example: `users`, `order_items`                               

Columns............. snake_case          
                     Example: `user_id`, `created_at`                              

Constraints......... snake_case, prefixed
                     Example: `pk_users`, `fk_orders_user_id`, `chk_price_positive`

Supabase SDK Naming Conventions

Variables........... camelCase
                     Example: (`supabaseClient`, `authSession`)

Tables/Columns...... Inherit PostgreSQL conventions therefore keeping backend-frontend mapping friction-less.

APIs Naming Conventions

Endpoints........... kebab-case, nouns, versioned
                     Example: `/api/v1/users`, `/api/v1/order-items`

Query Params........ snake_case                  
                     Example: `?page=2&include_posts=true`          

Error Codes......... snake_case                  
                     Example: `{ "error_code": "user_not_found" }`  

Auth Identifiers.... snake_case                  
                     Example: `access_token`, `refresh_token`       

GraphQL Naming Conventions

Queries............. camelCase      
                     Example: `getUserProfile`, `listOrders`   

Mutations........... camelCase verbs
                     Example: `createUser`, `updateOrderStatus`

Types............... PascalCase     
                     Example: `User`, `OrderItem`              

Resolvers........... camelCase      
                     Example: `userProfile: () => ...`         

Key Takeaways Naming Conventions

1. Frontend (HTML, CSS, JS, Vue, Tailwind) 
     → camelCase for logic, kebab-case for selectors
     → PascalCase for components/classes.

2. Backend & DB (Node.js, PostgreSQL, Supabase) 
     → snake_case for data, kebab-case for files/folders.

3. APIs (REST, GraphQL) 
     → snake_case for data, kebab-case for URLs, PascalCase for types.

4. Consistency beats preference — once set, 
     → enforce with linters (ESLint, Stylelint, Prettier) and schema validation.

---

Author: Wasula Benjamin
Role: UIUX Designer & Developer
Last Updated: 14TH OCTOBER, 2025