Referência Rápida
| Necessidade | Ver |
|---|---|
| Problemas de HTML/CSS | html-css.md |
| Padrões JavaScript | javascript.md |
| React/Next.js/frameworks | frameworks.md |
| Implantar em produção | deploy.md |
| Performance/SEO/a11y | performance.md |
Regras Críticas
- DOCTYPE importa — A falta de
<!DOCTYPE html>ativa o modo quirks; layouts quebram de forma imprevisível - Especificidade CSS vence a cascata —
.classsobrescreve seletores de elemento independentemente da ordem ===não==— A coerção de tipos faz"0" == falseser verdadeiro- Async/await em loops —
forEachnão aguarda; usefor...ofouPromise.all - CORS é no servidor — Não há correção no cliente; configure
Access-Control-Allow-Originno servidor - Responsivo = viewport meta — Sem
<meta name="viewport">, dispositivos móveis renderizam largura de desktop - Formulário sem
preventDefault— A página recarrega; chamee.preventDefault()no manipulador de submit - Imagens precisam de dimensões — A falta de
width/heightcausa deslocamento de layout (penalidade CLS) - HTTPS ou bloqueado — Conteúdo misto (recursos HTTP em páginas HTTPS) é bloqueado pelos navegadores
- Variáveis de ambiente vazam —
NEXT_PUBLIC_*expõe ao cliente; nunca prefixe segredos
Solicitações Comuns
"Tornar responsivo" → CSS mobile-first com media queries; testar em 320px, 768px, 1024px
"Implantar em produção" → Veja deploy.md para padrões de Vercel/Netlify/VPS
"Corrigir erro CORS" → O servidor deve enviar cabeçalhos; faça proxy através de mesma origem se não puder controlar o servidor
"Melhorar performance" → Auditoria Lighthouse; focar em LCP, CLS, FID; carregar sob demanda imagens abaixo da dobra
"Adicionar SEO" → Título/descrição por página, HTML semântico, tags OG, sitemap.xml
Árvore de Decisão de Frameworks
- Conteúdo estático, builds rápidas → Astro ou HTML puro
- Blog/docs com MDX → Astro ou Next.js App Router
- App interativo com autenticação → Next.js ou Remix
- Controle total de SSR/ISR → Next.js
- SPA simples, sem necessidade de SEO → Vite + React/Vue