# Coding Standards

## 1. HTML
- **Semantic HTML5:** Use `<article>`, `<section>`, `<nav>`, `<aside>`, `<header>`, `<footer>`. No `<div>` soup.
- **Accessibility:** All images must have alt tags. Use `aria-hidden="true"` for purely decorative SVG icons. Forms must have associated `<label>` elements.

## 2. CSS
- **Methodology:** BEM (Block Element Modifier). e.g., `.card`, `.card__title`, `.card--dark`.
- **Variables:** Use root CSS variables for all tokens (colors, spacing, typography).
- **No !important:** Unless absolutely overriding a rigid third-party plugin (which we avoid anyway).

## 3. JavaScript
- **Vanilla ES6+:** No jQuery.
- **Modules:** Break JS into modular files (e.g., `animations.js`, `nav.js`, `helpers.js`).
- **Performance:** Debounce resize/scroll events if not handled natively by GSAP.

## 4. GSAP
- **Context:** Use `gsap.context()` for easier cleanup (especially important if transitioning to a framework later).
- **ScrollTrigger:** Always use `invalidateOnRefresh: true` for responsive animations.

## 5. WordPress
- **PHP:** Adhere to WordPress Coding Standards (WPCS).
- **Security:** Always escape output (`esc_html()`, `esc_url()`). Always sanitize input.

## 6. Git Conventions
- **Commits:** Conventional Commits (e.g., `feat: added hero section`, `fix: header contrast on mobile`).
- **Branches:** `main`, `develop`, `feature/xyz`, `bugfix/xyz`.