As Melhores Práticas de Desenvolvimento Web (HTML5 e CSS3)

Neste artigo vamos conhecer as melhores práticas de desenvolvimento web. Algo muito importante principalmente para quem está iniciando.

Ou seja, se você está iniciando é muito importante que comece da forma certa, utilizando os melhores padrões de desenvolvimento.

Isso será muito importante tanto para a qualidade do seu código quanto para a manutenção dele no futuro.

Portanto, esse artigo focará em te ajudar exatamente nessa questão. Vamos lá?

Um Resumo do HTML5

Primeiramente, vamos entender o que é o HTML5 que nada mais é do que a nova versão do HTML e do XHTML.

O principal objetivo dessa nova versão é facilitar a manipulação dos elementos possibilitando que o desenvolvedor modifique as características dos objetos de forma não intrusiva.

Dessa forma, o desenvolvedor consegue criar projetos mais transparente para o usuário final.

Veja também: Os Melhores Cursos GRATUITOS De Programação Com Certificado

Ou seja, diferente das versões anteriores, o HTML5 fornece ferramentas para o CSS e JavaScript fazerem seu trabalho da melhor forma possível deixando as aplicações mais leves e eficaz.

Melhores Práticas em HTML

Agora vamos conhecer as melhores práticas para desenvolver seu HTML deixando ele mais fácil de ser lido e facilitando manutenções futuras.

Sempre utilize indentação

Indentação nada mais é do que um espaço entre o inicio do texto deixando ele mais legivel.

Portanto, todos os elementos dentro de outros elementos devem sempre ser indentados.

Por favor, não se esqueçam nunca disso.

Exemplo de código não indentado:

<div>
<input>
</div>

Exemplo de código indentado:

<div>
     <input>
</div>

Tenha essa regra sempre em mente: Elementos aninhados, devem ser sempre indentados.

Utilize aspas duplas.

Utilize sempre aspas duplas para definir atributos. Essa é a “regra” principal da SGML (Standard Generalized Markup Language).

Além disso, deixa o código mais elegante e legível!

<div class=”aspasduplas”>

Busque pela simplicidade

Muitas pessoas acham que programar é criar códigos extremamente complexos e isso nem sempre é verdade.

O que todos querem é a simplicidade do código. Quanto mais simples melhor para todos.

Veja também: Os Melhores Cursos GRATUITOS De Programação Com Certificado

Isso facilita o entendimento futuro de outros desenvolvedores que eventualmente irá dar manutenção no seu código.

Portanto, busque sempre simplificar as coisas. Quanto mais simples mais produtivo você será.

Não utilize tabelas para layouts

Isso é um erro muito comum para os iniciantes em desenvolvimento web. Jamais utilize tabelas para layouts de páginas.

Tabelas devem ser utilizadas apenas para apresentar dados de uma forma mais organizada.

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

Sempre que possível utilize os elementos:

• <thead>
• <tbody>
• <th>

Além disso, utilize também o atributo scope para ajudar.

Um Breve Resumo do CSS3

Antes de continuar sobre as melhores práticas de desenvolvimento web devemos conhecer o Cascading Style Sheets, mais conhecido como CSS está na terceira e mais nova versão.

CSS nada mais é do que um arquivo de definição de estilos para um projeto web (página de internet).

Através do CSS3 podemos criar diversos efeitos, por exemplo:

• Transição;
• Imagem de fundo;
• Animações
• E muito mais…

Dominar o CSS3 é pré-requisito para qualquer desenvolvedor que deseja trabalhar com o Front-End.

Portanto, se você quer se tornar um desenvolvedor Front-End recomendo focar no CSS pois ele será um dos principais aliados nessa jornada.

Melhores Práticas em CSS

Formatação do CSS

Mantenha sempre a formatação dos seletores CSS em uma única linha e cada propriedade em sua própria linha. Todas as declarações devem ser indentadas.

Ou seja, insira um reforço com 2 ou 4 espaço para estilos relacionados ou filhos.

Dessa forma, a organização fica mais simples de ser visualizados por desenvolvedores iniciantes.

.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

O “px” é utilizado como unidade de medida para definir por exemplo o font-size, pelo fato de oferecer o controle absoluto sobre o texto.

A unidade de medida “em” acabou se tornando popular por conta da compatibilidade com o Internet Explorer 6, já que não redimensiona pixel com base em texto.

Atualmente, basicamente todos os principais navegadores (Incluindo o IR7 e IE8) suportam texto redimensionado com unidade em “px” 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

Como melhores práticas de desenvolvimento web evite utilizar seletores que não sejam necessários.

Exemplo: Seletor ID para a tag body.

Essa prática pode confundir o seu CSS, caso você esqueça para que serve esse seletor. Neste caso é 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, principalmente quem está iniciando acabar escrevendo código redundante.

Mas não se desespere, vou te explicar para você entender.

Por exemplo, você tem uma div e dentro dela um button.

<div>
   <button>
</div>

E aí no seu CSS você tem:

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

No caso do CSS, todos os elementos filhos herdam atributos dos seus elementos pais.

Ou seja, o button já tem color:red de nascença!

Portanto, utilize a herança para deixar seu código limpo e sem redundância.

Id ou Class?

É muito importante sempre dar preferencia para class. Com isso seu código fica muito mais fácil de ser atualizado e reutilizado.

Utilizar o ID deixa seu código muito engessado. Isso porque você não pode ter mais de um e não pode repeti-lo.

No caso da 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;
}

Neste caso faz mais sentido você criar essa nova classe .box que escrever o CSS usando as classes dos outros dois elementos .menu e .blog.

Caso precise criar um terceiro box, é 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 tragédia 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.

Conclusão das melhores práticas de desenvolvimento Web

Em conclusão, procure sempre manter as melhores práticas de desenvolvimento Web e todos os seus projetos.

Além disso, mantenha o seu código simples de ser lido, não fique focando em soluções mirabolantes.

E se você pudesse aprender mais e mais sobre desenvolvimento Web e se aprofundar nas mais incríveis tecnologias do mercado?

Clique no botão abaixo para acessar mais de 1400 cursos completos e com certificado válido.

ACESSAR CURSOS COM CERTIFICADO

Invista em você e conquiste uma excelente carreira profissional na área da tecnologia.

Enfim, muito obrigado pela audiência e lhe desejo muito sucesso!!

Tags: boas praticas | css | front end | html