camelCase is a naming convention where the first word is lowercase and each subsequent word starts with a capital letter. There are no spaces, hyphens, or underscores between words.
Functions should start with action words (verbs) that clearly describe what the function does. Common prefixes include: get, set, create, update, delete, validate, submit, handle, toggle, etc.
PascalCase (also called UpperCamelCase) is similar to camelCase but the first letter is also capitalized. Every word starts with a capital letter, with no spaces or separators.
kebab-case uses lowercase letters with hyphens separating words. It's commonly used for file names, URLs, and CSS class names because it's web-friendly and readable.
Suffixes are descriptive endings added to variable names to clarify their purpose, type, or element type. Common suffixes include: Btn, El, Input, List, Data, Config, etc.
Variables should use camelCase and have descriptive names that clearly indicate their purpose. Good variable names make code self-documenting and reduce the need for comments. Avoid abbreviations, single letters, or generic names like 'data' or 'temp'.
// Good variable names
const userName = 'john_doe';
const loginStatus = true;
const totalAmount = 1500;
const userProfile = {
name: 'John',
email: 'john@example.com'
};
const searchResults = [];
const isLoggedIn = false;
// Bad variable names
const user_name = 'john_doe';
const LoginStatus = true;
const x1 = 1500;
const temp = {
name: 'John',
email: 'john@example.com'
};
const data = [];
const flag = false;
Functions should use camelCase with a verb prefix that describes the action being performed. This makes the code more readable and immediately tells other developers what the function does. Functions represent actions, so they should always start with action words.
// Good function names
function getUser(id) {
return users.find(user => user.id === id);
}
function validateEmail(email) {
return email.includes('@');
}
function submitForm(formData) {
// submit logic
}
function handleButtonClick() {
// click handler
}
function createNewUser(userData) {
// creation logic
}
// Bad function names
function get_user(id) {
return users.find(user => user.id === id);
}
function ValidateEmail(email) {
return email.includes('@');
}
function func1(formData) {
// submit logic
}
function click() {
// click handler
}
function User(userData) {
// creation logic
}
Classes should use PascalCase with descriptive names that represent the entity or concept. Classes are blueprints for objects and typically represent nouns or concepts in your application. The capitalized format distinguishes them from functions and variables.
// Good class names
class LoginPage {
constructor() {
this.username = '';
this.password = '';
}
}
class UserDetails {
constructor(user) {
this.user = user;
}
}
class HomeScreen {
render() {
// render logic
}
}
class NavigationBar {
// navigation logic
}
// Bad class names
class loginPage {
constructor() {
this.username = '';
this.password = '';
}
}
class user_details {
constructor(user) {
this.user = user;
}
}
class homeClass {
render() {
// render logic
}
}
class navbar {
// navigation logic
}
Files should use kebab-case (all lowercase with hyphens) for better cross-platform compatibility. This format is web-friendly, works consistently across different operating systems, and is easier to type and read. It's the standard convention for web development files.
// Good file names login-page.js user-details.js home-screen.js navigation-bar.js form-validator.js api-client.js utils.js constants.js
// Bad file names LoginPage.js UserDetails.js homeScreen.js navigationBar.js formValidator.js APIClient.js home test.js user_details.js
Test files should use kebab-case with .cy.js extension for Cypress tests, or .test.js/.spec.js for other tests. The .cy.js extension is Cypress-specific and helps distinguish end-to-end tests from unit tests. This naming convention makes it easy to identify and organize test files.
// Good test file names login-test.cy.js user-registration.cy.js home-page.cy.js add-user.cy.js form-validation.cy.js api-integration.cy.js
// Bad test file names LoginTest.js UserRegistration.cy.js homePage.cy.js adduser.cy.js formValidation.test.js API_Integration.cy.js
Folders should use kebab-case or simple lowercase names for consistency and compatibility. This ensures your project structure works across different operating systems and deployment environments. Clear folder names help organize code and make navigation easier for team members.
// Good folder structure cypress/ ├── e2e/ ├── fixtures/ ├── support/ ├── page-objects/ ├── utils/ ├── test-data/ └── screenshots/
// Bad folder structure cypress/ ├── E2E/ ├── Fixtures/ ├── Support/ ├── PageObjects/ ├── Utils/ ├── Test Data/ └── Screenshots/
Selector variables should use camelCase with descriptive suffixes like Btn, El, Input, etc. to indicate the element type. This makes Cypress tests more readable and maintainable. When selectors change, you only need to update the variable definition, not every occurrence in your tests.
// Good selector variables
const loginBtn = '[data-cy="login-button"]';
const usernameInput = '#username';
const passwordInput = '#password';
const submitBtn = 'button[type="submit"]';
const userTableRow = '.user-table tr';
const searchInputEl = '[data-testid="search-input"]';
const navigationMenuEl = '.nav-menu';
const errorMessageEl = '.error-message';
// Usage in tests
cy.get(loginBtn).click();
cy.get(usernameInput).type('john@example.com');
cy.get(passwordInput).type('password123');
// Bad selector variables
const login_button = '[data-cy="login-button"]';
const USERNAME = '#username';
const pwd = '#password';
const btn1 = 'button[type="submit"]';
const table = '.user-table tr';
const input = '[data-testid="search-input"]';
const menu = '.nav-menu';
const error = '.error-message';
// Usage in tests
cy.get(login_button).click();
cy.get(USERNAME).type('john@example.com');
cy.get(pwd).type('password123');