Melhores práticas de desenvolvimento Web – HTML e CSS

<div>
     <input>
</div>

Busque pela simplicidade

Faça o que você quiser, mas utilize o mínimo de código com a menor complexidade possível.

Isso facilita o seu entendimento posteriormente e o entendimento de outros desenvolvedores sobre o seu código.

Não utilize tabelas para layouts

Em hipótese alguma as tabelas devem ser utilizadas para layouts de página. Utilize-as apenas para apresentar dados de uma forma organizada.

<thead>, <tbody> e <th> (e o atributo scope)

Sempre que apropriado faça o uso dos elementos <thead>, <tbody> e <th> (e o atributo scope)

Um breve resumo do CSS3

Segundo o Wikipedia, CSS3 é a terceira mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), pela qual se define estilos para um projeto web (página de internet).

Com efeitos de transição, imagem, imagem de fundo/background e outros, pode-se criar estilos únicos para seus projetos web, alterando diversos aspectos de design no layout da página.

Leia também: 7 Dicas para escrever um CSS mais Sexy e Poderoso

Melhores práticas em CSS

Formatação do CSS

Mantenha a formatação dos seletores CSS em uma mesma linha e cada propriedade em sua própria linha. As declarações devem ser identadas.

Insira um reforço com 2 ou 4 espaços para estilos relacionados ou filhos. Isso permite uma organização visual hierárquica e torna mais fácil (para algumas pessoas) a leitura da folha de estilos.

.post-list li a{
    color:#A8A8A8;
}
   .post-list li a:hover{
        color:#000;
        text-decoration:none;
    }
   .post-list li .author a, .post-list li .author a:hover{
        color:#F30;
        text-transform:uppercase;
    }

Pixels vs. Ems

Utilizamos “px” como unidade de medida para definir o font-size, porque oferece o controle absoluto sobre o texto.

A unidade de medida “em” se tornou popular para acomodar o Internet Explorer 6, já que não redimensiona pixel com base em texto.

Porém, agora todos os principais navegadores (incluindo IE7 e IE8) suportam texto redimensionado com unidade baseada em pixel e/ou zoom na página inteira.

Desde que o IE6 foi considerado obsoleto, é preferível usar tamanho em pixels. A unidade line-height também deve ser usada, porque não herda um valor percentual do seu elemento pai, mas é baseado no multiplicador do font-size.

Correto

#selector {
    font-size: 13px;
    line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Arredonde para 20px. */
}

Incorreto

/* Equivalente a um font-size de 13px e 20px de line-height, mas apenas se o tamanho padrão de texto do navegador for 16px. */

#selector {
   font-size: 0.813em;
   line-height: 1.25em;
}

Evite seletores

Evite seletores que não sejam necessários.

Ex: Seletor ID para a tag body.

Isso pode causar confusão no seu CSS, caso você esqueça para que serve esse seletor, então é muito mais intuitivo utilizar a própria tag.

No caso de divs, que geralmente existem em maior quantidade no código, é mais interessante utilizar class.

Cuidado com a redundância

É muito comum a gente se pegar escrevendo código redundante.

Calma, vou lhe explicar para você entender direitinho!

Você tem uma div e dentro dessa div você tem um button.

<div>
   <button>
</div>

Aí no seu CSS você tem:

div: {
  color: red
}
button: {
  color: red
}

No CSS, todos os elementos filhos herdam atributos dos seus elementos pais, ou seja: O button já tem color:red de nascença!

Utilize a herança para deixar seu código limpo e nada redundante.

Id ou Class?

Sempre prefira class, sempre!

Irá deixar seu código mais fácil de ser atualizado e reutilizado.

ID é algo muito engessado. Você não pode ter mais de um e não pode repeti-lo, a class você pode definir agora para um elemento e depois adicionar em outro elemento que precise.

Você pode criar uma class que tenha um CSS muito utilizado em vários elementos e depois utilizar outras classes para especificar outras coisas desse elemento.

Por exemplo:

Você tem dois elementos na página (.menu e .blog) que têm funções e visuais diferentes.

Mas os dois seguem a base visual do site que é um fundo rosa, com borda redonda e uma sombra. Ao invés de copiar as propriedades, crie uma nova classe base pra esses elementos:

<div class="box menu">...</div>
<div class="box blog"></div>

.box {
  background: #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 2px black;
}

É muito melhor você criar essa nova classe .box que escrever o CSS usando as classes dos outros dois elementos .menu e .blog.

O dia que um terceiro box surgir, é só aplicar a classe, sem mexer no CSS.

Outro motivo pra você evitar IDs no CSS é que você não pode sobrescrever suas propriedades com suas classes genéricas reaproveitáveis.

Precisaria de outro ID pra sobrescrever um seletor de ID.

Não brigue com a especificidade. Mantenha a especificidade dos seus seletores no mesmo nível usando classes sempre pra estilizar. São mais fáceis de compor.

Cuidado com os números mágicos

Toda vez que você escreve um margin-top: 67px ou um width: 321px uma tragedia acontece.

Faça o máximo possível para evitar números mágicos no seu CSS que são calculados arbitrariamente.

Pior ainda aquele número mágico para alinhar algo (tipo um top:-1px) que certamente está levando em conta a renderização em um certo navegador, porém vai quebrar em outro.

Isso irá deixar o seu CSS pouco reaproveitável e precisará de manutenção constante. Quer alinhar um ícone com texto? Aprenda a usar o vertical-align:middle.

Nesse caso como resolver o width? É o que veremos no próximo tópico:

Use unidades flexíveis

Números mágicos podem ser evitados em muitos casos usando unidades relativas como porcentagens.

Vamos supor que você tem uma página com 940px de largura e precisa dividir em 5 colunas, não escreva width:188px porque provavelmente você nunca irá se lembrar de onde surgiu esse valor.

Utilize width:20% que irá organizar de maneira mais óbvia 1/5 da página para cada coluna.

Se puder faça todas as suas unidades de layout utilizando porcentagens. Isso vai fazer seu design ser flexível e não depender do tamanho do navegador.

A Web é uma mídia elástica e confinar sua página a pixels estáticos é transformar a Web em uma mídia limitada.

Aprenda a nomear suas classes

Como boa parte das boas práticas citadas aqui envolvem classes, é bom saber nomeá-las direito.

A regra óbvia, que você já segue, é criar nomes legíveis e fáceis de entender:

Use .banner-principal ao invés de .bnnPri.

Outro ponto que você deve entender é que nossas classes não devem ter semântica de visual e sim de conteúdo.

Se as suas classes forem “box-azul” ou “menu-superior” e algum dia esses elementos não forem mais azul ou superior, o nome da classe perde o significado.

Seja simples e preciso. Utilize “box”, “menu”, “painel” e por aí vai.