Regras Gerais
Codificação
UTF-8(sem BOM)
É a codificação recomendada no HTML5. É utilizado como o padrão de vários CMSs. Deve ser utilizado para evitar problemas inesperados.
Comentário
Quando há possibilidade de mal-entendimento ou na parte confusa do código deve deixar comentários.
Indentação
Usar 2 espaços e não usar tabulador.
Grande parte dos programadores usam 2 espaços.Seguir o habito comum. Referência: Popular Coding Convention on Github
<!--Recomended-->
<div>
<ul>
<li>item1
<li>item2
</ul>
</div>
/* Recomended */
.selector {
propaty: value;
}
1 Elemento por Linha
Para manter legibilidade, sempre escrever 1 elemento em cada linha.
<!-- Recomended -->
<p>
Hello <a href="#">World</a>
</p>
<ul>
<li>itemA
<li>itemB
</ul>
<!-- Not Recomended -->
<p>Hello <a href="#">World</a></p>
<ul>
<li>itemA<li>itemB
</ul>
/* Recommended */
.selector {
font-size: 1.2em;
color: #A1A1A1;
}
/* Not recommended */
.selector {font-size: 1.2em;color: #A1A1A1;}
Caixa das Letras
Usar caixa baixa nos tag
, id
, class
e código de cores
exceto na aplicação do estilo CamelCase
.
(Referência: [wiki/CamelCase]https://pt.wikipedia.org/wiki/CamelCase))
Facilita a edição e mantêm a legibilidade.
<!-- Recommended -->
<a href="#">Home</a>
<!-- Not recommended -->
<A HREF="#">Home</A>
/* Recommended */
.selector {
color: #a1a1a1;
}
/* camelCase */
.mySelector {
}
/* Not recommended */
.SELECTOR {
COLOR: #A1A1A1;
}
.MYSELECTOR {
}
Espaços na Ponta Final
Não deixar espaços e tabuladores depois da ultima letra. E capas de ocorrer problemas em alguns programas.
<!-- Recomended -->
<p>Hello.
<!-- Not recomended -->
<p>Hello_
Checar a Validade
HTML Validator: W3C
CSS Validator: W3C
Sempre checar a validade do código para evitar problemas inesperados.