# Frontend Guidelines

By **bendc** · Artigos

Um conjunto conciso e opinativo de boas práticas de HTML, CSS e JavaScript, abordando semântica, acessibilidade, desempenho e padrões de manutenibilidade, cada um ilustrado com exemplos de código ruim versus bom.

- Source: https://github.com/bendc/frontend-guidelines
- Repository: https://github.com/bendc/frontend-guidelines
- Tags: html, css, javascript, best-practices, open-source, style-guide, accessibility, frontend
- Pricing: free
- Upvotes: 0

## Features

- Regras concisas de boas práticas de HTML, CSS e JavaScript
- Cada regra ilustrada com um exemplo de código ruim versus bom
- Orientações de HTML sobre semântica, acessibilidade e desempenho
- Orientações de CSS sobre fluxo, especificidade, layout e animação
- Orientações de JavaScript sobre pureza, métodos nativos e legibilidade
- Pode ser adotado como base de equipe ou referência de integração

---

Frontend Guidelines é um conjunto conciso e amplamente referenciado de boas práticas de HTML, CSS e JavaScript, apresentado como regras curtas, cada uma ilustrada com um exemplo de código ruim versus bom. É opinativo e pragmático, em vez de exaustivo - o tipo de documento que uma equipe pode adotar integralmente como base ou usar para integrar novos engenheiros.

A seção de HTML aborda semântica, brevidade, acessibilidade, idioma e codificação de caracteres, e desempenho. A seção de CSS defende manter os elementos no fluxo natural do documento, minimizar a especificidade e o `!important`, preferir layouts modernos (Flexbox e Grid), favorecer transições em vez de animações, e animar apenas opacidade e transform. A seção de JavaScript aposta na legibilidade e na pureza, preferindo métodos de array em vez de loops, mantendo funções livres de efeitos colaterais e se apoiando em métodos nativos. Sua regra mais enfatizada: favoreça legibilidade, correção e expressividade em detrimento de micro-otimizações de desempenho, pois o JavaScript raramente é seu gargalo.

## FAQ

### O que o Frontend Guidelines aborda?

Boas práticas em três áreas: HTML (semântica, acessibilidade, desempenho), CSS (fluxo, especificidade, layout moderno, animação) e JavaScript (pureza, métodos nativos, legibilidade).

### Para quem é indicado?

Equipes que desejam uma base pronta de convenções frontend, e engenheiros em processo de integração a uma base de código que querem uma referência rápida e opinativa.

### Qual é seu princípio central?

Favorecer legibilidade, correção e expressividade em detrimento de micro-otimizações de desempenho - o documento argumenta que o JavaScript raramente é seu gargalo, então otimize imagens, rede e reflows do DOM.

---
[View on Analog](https://analoghq.ai/pt-br/bendc/articles/frontend-guidelines)