Guia de Diretrizes Frontend

Uma abordagem prática para times de desenvolvimento escreverem código consistente, acessível e sustentável.

Princípios de HTML

  • Utilizar sempre markup semântico HTML5.
  • Priorizar acessibilidade desde a autoria, usando ARIA apenas quando necessário.
  • Comentários claros: <!-- Explica com clareza a função do bloco -->
  • Usar espaços para indentação.
  • Avaliar uso de pré-processadores ou engines de template caso haja integração com backend.
  • Consultar padrões: Yellowshoe HTML Standards

Princípios de CSS

  • Separação clara por módulos/componentes para facilitar manutenção.
  • Adotar metodologia: BEM, SMACSS ou OOCSS e documentar exceções.
  • Padronizar espaçamento: 2 espaços.
  • Utilizar pre-processadores (Sass/Less) quando justificável e seguir guias como Sass Guidelines.
  • Normalizar com reset ou normalize.css.
  • Comentar: /* Comentário explicativo de bloco ou exceção */
  • Consultar recursos: CSS Guidelines

Princípios de JavaScript

  • Evitar acoplamento excessivo e dependências desnecessárias.
  • Seguir padrões de design (ex: módulo, singleton).
  • Frameworks e libs documentados (React, Vue, jQuery, etc).
  • Usar testes automáticos (Jasmine, Jest).
  • Comentários no padrão // Explicação do bloco de código.
  • Consultar guias: Airbnb JS Guide

Mídia & Imagens

  • Usar SVG e fontes de ícone quando o contexto for adequado.
  • Imagens responsivas com srcset e <picture>.
  • Otimização usando ferramentas recomendadas no Web Fundamentals.

Fontes

  • Fonts customizadas carregadas por serviço ou CDN (ex: Google Fonts ou Typekit).
  • Testar acessibilidade e fallback.
  • Consultar Font Squirrel para otimização.

Performance

  • Definir budgets para performance (load, LCP, TTI etc).
  • Usar testes periódicos (PageSpeed, Webpagetest).
  • Técnicas: compressão Gzip, minificação de arquivos, otimização de imagens.
  • Referência: Google Web Fundamentals

Acessibilidade

  • Seguir checklist do A11y Project.
  • Automatizar testes em integração (axe, Wave, Lighthouse).

Ferramentas & Integração

  • Task runners (Gulp, Grunt) e gerenciadores de dependências (npm, Yarn).
  • Ferramentas de linting (Stylelint, ESLint) integradas a CI.
  • Padronizar ambientes com EditorConfig.
  • Scaffolders (Yeoman) para inicialização de projetos.

Controle de Versão

  • Usar Git e hospedar repositório em GitHub ou similar.
  • Definir workflow (feature branch, Gitflow).
  • Gerenciar issues via GitHub Issues/Jira.

Suporte & Otimização

  • Otimizar para navegadores e devices definidos pela estratégia do projeto.
  • Declarar browsers oficiais suportados (ex: Chrome, Firefox, Edge, Safari).

Internacionalização

  • Prever traduções, formatos de data e número.
  • Armazenar strings em arquivos separados por idioma.

Documentação

  • Utilizar pattern libraries (ex: Storybook) e documentar arquitetura e decisões.
  • Nomear responsáveis pela governança da documentação.
  • Revisar e atualizar guidelines conforme novas necessidades.

Referências

Consulte as referências diretamente nas seções para melhores práticas específicas. Todas as fontes foram citadas conforme orientações de documentação web e padrões internacionais de citação.