Boas Práticas para GitFlow com HTML e CSS

1. Nomeação de Branches

Uma nomenclatura padronizada e clara para as branches facilita a organização do código e a identificação de funcionalidade.

Boas Práticas:

  • Utilize um padrão consistente: feature/nome-da-funcionalidade, bugfix/nome-da-correção.

  • Evite nomes genéricos como feature/alteracao ou hotfix/ajuste.

  • Use kebab-case ou snake_case para evitar espaços (exemplo: feature/responsive-navbar ou hotfix/footer_bug).

Exemplo de criação de branch:

 git checkout -b feature/menu-responsivo

2. Commits Claros e Objetivos

Escrever mensagens de commit bem estruturadas facilita a compreensão das alterações feitas no projeto.

Boas Práticas:

  • Seja descritivo e direto: uma boa mensagem de commit resume a mudança de forma clara.

  • Utilize o tempo verbal correto: mensagens no imperativo são recomendadas (Adiciona, Corrige, Remove).

  • Prefira commits pequenos e frequentes ao invés de um grande commit com muitas alterações.

Exemplos de mensagens de commit boas:

  • Adiciona estilo responsivo ao menu

  • Corrige bug no layout do footer em telas menores

3. Uso de Pull Requests para Revisão

Os Pull Requests (PRs) no GitHub permitem que alterações sejam revisadas antes de serem incorporadas à branch principal.

Boas Práticas:

  • Sempre crie um PR ao finalizar uma feature, release ou hotfix.

  • Utilize uma descrição detalhada no PR para explicar as mudanças.

  • Marque membros da equipe para revisão antes de aprovar a fusão.

Exemplo de PR bem documentado:

Título: "Adiciona layout responsivo ao menu de navegação"Descrição:

  • Adiciona media queries para tornar o menu responsivo.

  • Corrige alinhamento do logo e espaçamento dos itens.

  • Testado em dispositivos móveis e desktop.

4. Separação de Código HTML, CSS e JS

Uma estrutura organizada do projeto facilita a manutenção e reutilização do código.

Boas Práticas:

  • Utilize pastas organizadas (/css, /js, /img).

  • Não misture CSS inline no HTML, prefira arquivos externos.

  • Use uma estrutura modular (exemplo: style.css para estilos gerais e navbar.css para estilos específicos do menu).

Exemplo de estrutura recomendada:

/projeto
│── index.html
│── /css
│   │── style.css
│   │── navbar.css
│── /js
│   │── script.js
│── /img
│   │── logo.png

5. Testes Antes de Fazer Merge

Antes de mesclar uma branch ao develop ou main, é fundamental testar o código para evitar bugs.

Boas Práticas:

  • Testar localmente antes de enviar um PR.

  • Verificar compatibilidade em diferentes navegadores.

  • Certificar-se de que o CSS não está quebrando o layout.