Code Standards #

Our coding conventions and style guidelines.

General Principles #

  1. Clarity over brevity - Code is read more than written
  2. Consistency - Follow existing patterns in the codebase
  3. Self-documenting - Use clear names, add comments only when necessary

Naming Conventions #

Variables and Functions #

// Good
const userCount = 42;
function calculateTotalPrice(items: Item[]): number { }

// Bad
const n = 42;
function calc(i: Item[]): number { }

Classes and Types #

// PascalCase for classes and types
class UserService { }
interface ApiResponse { }
type UserId = string;

// camelCase for instances
const userService = new UserService();

Files and Folders #

src/
  components/
    UserProfile.tsx       # PascalCase for components
    user-profile.css      # kebab-case for styles
  utils/
    format-date.ts        # kebab-case for utilities
  hooks/
    useAuth.ts            # camelCase for hooks

TypeScript #

Use strict types #

// Good
function greet(name: string): string {
  return `Hello, ${name}!`;
}

// Avoid any
function greet(name: any): any {  // Bad
  return `Hello, ${name}!`;
}

Prefer interfaces for objects #

// Good
interface User {
  id: string;
  name: string;
  email: string;
}

// Use type for unions/intersections
type Status = 'pending' | 'active' | 'inactive';

PHP #

Follow PSR-12 #

<?php

declare(strict_types=1);

namespace App\Services;

class UserService
{
    public function __construct(
        private readonly UserRepository $repository
    ) {
    }

    public function find(int $id): ?User
    {
        return $this->repository->find($id);
    }
}

CSS #

Use CSS custom properties #

:root {
  --color-primary: #0066cc;
  --spacing-md: 16px;
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

Code Review Checklist #

  • [ ] Code follows naming conventions
  • [ ] Types are properly defined (no any)
  • [ ] Error cases are handled
  • [ ] Tests are included for new functionality
  • [ ] No console.log or debug statements

Next Steps #

Learn our Git Workflow for submitting changes.