Não importa quantas pessoas trabalhem no mesmo projeto, certifique-se de que cada linha de código pareça ter sido escrita pela mesma pessoa.
1. Use dois espaços em vez de tabulações - esta é a única maneira de garantir uma exibição consistente em todos os ambientes.
2. Os elementos aninhados devem ser recuados uma vez (ou seja, dois espaços).
3. Para a definição de atributos, certifique-se de usar aspas duplas e nunca use aspas simples.
4. Não adicione uma barra final a um elemento de fechamento automático – a especificação HTML5 afirma claramente que isso é opcional.
5. Não omita a tag de fechamento opcional
<!DOCTYPEhtml> <html> <cabeça> <title>Título da página</title> </head> <corpo> <img src="images/company-logo.png" alt="Empresa"> <h1 class="hello-world">Olá, mundo!</h1> </body> </html>
Adicione uma declaração de modo padrão à primeira linha de cada página HTML para garantir uma apresentação consistente em todos os navegadores.
<!DOCTYPEhtml> <html> <cabeça> </head> </html>
De acordo com a especificação HTML5:
É altamente recomendável especificar o atributo lang para o elemento raiz html para definir o idioma correto para o documento. Isso ajudará as ferramentas de síntese de fala a determinar a pronúncia que devem usar, ajudará as ferramentas de tradução a determinar as regras que devem seguir ao traduzir e assim por diante.
<html lang="en-us"> <!-- ... --> </html>
O IE oferece suporte a tags específicas para determinar a versão do IE que deve ser usada para desenhar a página atual. A menos que haja fortes necessidades especiais, é melhor configurá-lo para o modo Edge para notificar o IE para adotar o modo mais recente que ele suporta.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Ao declarar explicitamente a codificação de caracteres, você pode garantir que o navegador determine de forma rápida e fácil como o conteúdo da página deve ser renderizado. A vantagem disso é que você pode evitar o uso de tags de entidade de caracteres em HTML, para que tudo seja consistente com a codificação do documento (geralmente codificação UTF-8).
<cabeça> <meta charset="UTF-8"> </head>
De acordo com a especificação HTML5, geralmente não há necessidade de especificar o atributo type ao introduzir arquivos CSS e JavaScript, porque text/css e text/javascript são seus valores padrão, respectivamente.
<!-- CSS externo --> <link rel="stylesheet" href="code-guide.css"> <!-- CSS no documento --> <estilo> /* ... */ </estilo> <!-- JavaScript --> <script src="code-guide.js"></script>
Tente seguir os padrões e a semântica do HTML, mas não sacrifique a praticidade. Tente usar o menor número de tags e mantenha a complexidade sempre ao mínimo.
Os atributos HTML devem ser organizados na ordem abaixo para garantir a legibilidade do código.
aula
ID, nome
dados-*
src, for, tipo, href, valor
título, alt
papel, ária-*
class é usada para identificar componentes altamente reutilizáveis, portanto deve ser listada primeiro. O id é usado para identificar um componente específico e deve ser usado com cautela (por exemplo, marcadores dentro de uma página), por isso vem em segundo lugar.
Propriedades booleanas podem ser declaradas sem valor. A especificação XHTML exige que seja atribuído um valor, mas a especificação HTML5 não.
Para obter mais informações, consulte a seção WhatWG sobre atributos booleanos:
Se um atributo booleano de um elemento tiver um valor, é verdadeiro; se não tiver valor, é falso.
Se você precisar atribuir um valor a ele, consulte a especificação WhatWG:
Se o atributo existir, seu valor deverá ser a string vazia ou […] o nome canônico do atributo, sem espaços em branco à esquerda ou à direita.
Simplificando, não há necessidade de atribuir um valor.
Ao escrever código HTML, tente evitar elementos pais redundantes. Muitas vezes, isso requer iteração e refatoração para ser alcançado. Veja o seguinte caso:
<!-- Não tão bom --> <span class="avatar"> <img src="..."> </span> <!-- Melhor --> <img class="avatar" src="...">
As tags geradas por meio de JavaScript dificultam a localização e a edição do conteúdo e diminuem o desempenho. Evite quando puder.
1. Use dois espaços em vez de tabulações - esta é a única maneira de garantir uma exibição consistente em todos os ambientes.
2. Ao agrupar seletores, coloque os seletores individuais em suas próprias linhas.
3. Para facilitar a leitura do código, adicione um espaço antes da chave de abertura de cada bloco de declaração.
4. A chave de fechamento do bloco de declaração deve estar em uma linha separada.
5. Um espaço deve ser inserido após: em cada instrução de declaração.
6. Para um relato de erros mais preciso, cada afirmação deve estar em sua própria linha.
7. Todas as declarações devem terminar com ponto e vírgula. O ponto e vírgula após a última declaração é opcional, mas se você omiti-lo, seu código poderá ficar mais sujeito a erros.
8. Para valores de atributos separados por vírgula, um espaço deve ser inserido após cada vírgula (por exemplo, box-shadow).
9. Não insira espaços após vírgulas dentro dos valores rgb(), rgba(), hsl(), hsla() ou rect(). Isso ajuda a distinguir vários valores de cores (apenas vírgulas, sem espaços) de vários valores de atributos (vírgulas e espaços).
10. Para valores de atributos ou parâmetros de cores, omita o 0 inicial para decimais menores que 1 (por exemplo, 0,5 em vez de 0,5; -0,5px em vez de -0,5px).
Os valores 11/Hex devem estar todos em letras minúsculas, por exemplo, #fff. Os caracteres minúsculos são mais fáceis de ler ao digitalizar um documento porque a sua forma é mais fácil de distinguir.
12. Tente usar valores hexadecimais abreviados, por exemplo, use #fff em vez de #ffffff.
13. Adicione aspas duplas para os atributos no seletor, por exemplo, input[type="text"]. É opcional apenas em alguns casos, mas para consistência do código é recomendado usar aspas duplas.
14. Evite especificar unidades para valores 0, por exemplo, use margin: 0 em vez de margin: 0px;.
/* CSS ruim */
.selector, .selector-secundário, .selector[type=texto] {
preenchimento: 15px;
margem:0px 0px 15px;
cor de fundo:rgba(0, 0, 0, 0,5);
box-shadow:0px 1px 2px #CCC,inserção 0 1px 0 #FFFFFF
}
/* Bom CSS */
.seletor,
.seletor-secundário,
.selector[type="texto"] {
preenchimento: 15px;
margem inferior: 15px;
cor de fundo: rgba(0,0,0,.5);
sombra da caixa: 0 1px 2px #ccc, inserção 0 1px 0 #fff;
}As declarações de propriedade relacionadas devem ser agrupadas e organizadas na seguinte ordem:
Posicionamento
Modelo de caixa
Tipográfico
Visual
O posicionamento vem em primeiro lugar porque remove elementos do fluxo normal do documento e pode substituir estilos relacionados ao modelo de caixa. O modelo de caixa vem em segundo lugar porque determina o tamanho e o posicionamento dos componentes.
Outras propriedades afetam apenas o interior do componente ou não afetam os dois primeiros grupos de propriedades, por isso são classificadas atrás.
.declaração-ordem {
/* Posicionamento */
posição: absoluta;
superior: 0;
direita: 0;
inferior: 0;
esquerda: 0;
índice z: 100;
/* Modelo de caixa */
exibição: bloco;
flutuar: certo;
largura: 100px;
altura: 100px;
/* Tipografia */
fonte: normal 13px "Helvetica Neue", sem serifa;
altura da linha: 1,5;
cor: #333;
alinhamento de texto: centro;
/* Visuais */
cor de fundo: #f5f5f5;
borda: 1px sólido #e5e5e5;
raio da borda: 3px;
/* Diversos */
opacidade: 1;
}Comparada às tags, a diretiva @import é muito mais lenta, o que não apenas aumenta o número de solicitações adicionais, mas também causa problemas imprevisíveis. As alternativas incluem o seguinte:
Compile vários arquivos CSS em um arquivo por meio de um pré-processador CSS semelhante ao Sass ou Less. As funções de mesclagem de arquivos CSS são fornecidas por meio de Rails, Jekyll ou outros sistemas.
<!-- Usar elementos de link -->
<link rel="stylesheet" href="core.css">
<!-- Evite @importações -->
<estilo>
@importar url("mais.css");
</estilo>Coloque as consultas de mídia o mais próximo possível das regras relevantes. Não os empacote em um único arquivo de estilo nem os coloque no final do documento. Se você separá-los, eles só serão esquecidos por todos no futuro. Um exemplo típico é dado abaixo.
.elemento {...}
.elemento-avatar {...}
.elemento selecionado {...}
@media (largura mínima: 480px) {
.elemento {...}
.elemento-avatar {...}
.elemento selecionado {...}
}Para estilos que contenham apenas uma instrução, é recomendado colocá-la na mesma linha para legibilidade e edição rápida. Para estilos com múltiplas declarações, as declarações ainda devem ser divididas em múltiplas linhas.
O principal fator para fazer isso é a detecção de erros - por exemplo, o validador CSS indica que há um erro de sintaxe na linha 183. Se for uma única instrução em uma única linha, você não ignorará o erro; se forem várias instruções em uma única linha, será necessário analisá-la cuidadosamente para evitar perder o erro;
/* Declarações únicas em uma linha */
.span1 {largura: 60px;
.span2 {largura: 140px;
.span3 {largura: 220px;
/* Múltiplas declarações, uma por linha */
.sprite {
display: bloco embutido;
largura: 16px;
altura: 15px;
imagem de fundo: url(../img/sprite.png);
}
.icon { posição de fundo: 0 0 };
.icon-home { posição de fundo: 0 -20px };
.icon-account { posição de fundo: 0 -40px };Nos casos em que você precisa definir todos os valores explicitamente, você deve tentar limitar o uso de declarações abreviadas de propriedades. Os abusos comuns de declarações abreviadas de propriedade incluem o seguinte:
preenchimento
margem
fonte
fundo
fronteira
raio da fronteira
Na maioria dos casos, não precisamos especificar todos os valores para uma declaração abreviada de propriedade. Por exemplo, o elemento de cabeçalho HTML só precisa definir os valores das margens superior e inferior, portanto, você só precisa substituir esses dois valores quando necessário. O uso excessivo de declarações abreviadas de propriedades pode levar a um código desordenado e causar efeitos colaterais indesejados, causando substituições desnecessárias de valores de propriedades.
/* Mau exemplo */
.elemento {
margem: 0 0 10px;
fundo: vermelho;
plano de fundo: url("imagem.jpg");
raio da borda: 3px 3px 0 0;
}
/* Bom exemplo */
.elemento {
margem inferior: 10px;
cor de fundo: vermelho;
imagem de fundo: url("imagem.jpg");
raio superior esquerdo da borda: 3px;
raio superior direito da borda: 3px;
}Evite aninhamentos desnecessários. Isso ocorre porque embora você possa usar o aninhamento, isso não significa que deva. Use o aninhamento somente quando os estilos precisarem ser restritos ao elemento pai (ou seja, seletores descendentes) e houver vários elementos que precisam ser aninhados.
// Sem aninhamento
.table > thead > tr > th { …
.table > thead > tr > td { …
// Com aninhamento
.table > thead > tr {
>th { …
>td { …
}Para melhorar a legibilidade, adicione um espaço entre os valores, variáveis e operadores de expressões matemáticas entre parênteses.
// Mau exemplo
.elemento {
margem: 10px 0 @variável*2 10px;
}
//Bom exemplo
.elemento {
margem: 10px 0 (@variável * 2) 10px;
}O código é escrito e mantido por pessoas. Certifique-se de que seu código seja autodescritivo, bem comentado e fácil de ser entendido por outras pessoas. Bons comentários de código transmitem o contexto e a finalidade do código. Não basta reformular nomes de componentes ou classes.
Para comentários mais longos, certifique-se de escrever frases completas; para comentários gerais, você pode escrever frases concisas.
/* Mau exemplo */
/* Cabeçalho modal */
.modal-cabeçalho {
...
}
/* Bom exemplo */
/* Elemento de encapsulamento para .modal-title e .modal-close */
.modal-cabeçalho {
...
} 1. Somente caracteres minúsculos e travessões (sem sublinhados, nem maiúsculas e minúsculas) podem aparecer em nomes de classes. Traços devem ser usados na nomeação de classes relacionadas (semelhantes a namespaces) (por exemplo, .btn e .btn-danger).
2. Evite abreviações excessivamente arbitrárias. .btn representa botão, mas .s não pode expressar nenhum significado.
3. Os nomes das classes devem ser tão curtos quanto possível e ter um significado claro.
4. Use nomes significativos. Use nomes organizados ou intencionais, em vez de apresentação.
5. Baseado na classe pai ou classe base mais próxima como prefixo da nova classe.
6. Use classes .js-* para identificar comportamentos (em oposição a estilos) e não inclua essas classes em arquivos CSS.
/* Mau exemplo */
.t {...}
.vermelho { ... }
.header {...}
/* Bom exemplo */
.tweet {...}
.importante { ... }
.tweet-header {...} Use classes para elementos comuns, o que ajudará a otimizar o desempenho da renderização.
Para componentes de ocorrência frequente, evite usar seletores de atributos (por exemplo, [class^=”…”]). O desempenho do navegador pode ser afetado por esses fatores.
O seletor deve ser o mais curto possível e tentar limitar o número de elementos que o compõem. Recomenda-se não ultrapassar 3.
Restrinja as classes ao elemento pai mais próximo (ou seja, seletor descendente) somente quando necessário (por exemplo, quando não estiver usando classes prefixadas - os prefixos são como namespaces).
/* Mau exemplo */
intervalo {...}
.page-container #stream .stream-item .tweet .tweet-header .nome de usuário { ... }
.avatar {...}
/* Bom exemplo */
.avatar {...}
.tweet-header .nome de usuário {...}
.tweet.avatar {...}Configure seu editor da seguinte maneira para evitar inconsistências e diferenças comuns de código:
Use dois espaços para substituir caracteres de tabulação (tabulação suave significa usar espaços para representar caracteres de tabulação). Ao salvar o arquivo, remova os caracteres de espaço em branco à direita. Defina a codificação do arquivo para UTF-8. Adiciona uma linha em branco ao final do arquivo.
Consulte a documentação e adicione essas informações de configuração ao arquivo .editorconfig do seu projeto. Por exemplo: instância .editorconfig no Bootstrap. Para obter mais informações, consulte sobre EditorConfig.