Melhores práticas de desenvolvimento Web – HTML e CSS

Tempo de leitura: 9 minutos

Olá desenvolvedor tudo bem com você?

Espero que sim, mas se não estiver tenho certeza que vai ficar depois que você ler este artigo, pois vamos te entregar as melhores práticas de desenvolvimento Web em HTML e CSS.

Esse artigo vai chamar atenção principalmente de quem está começando a carreira, pois o HTML e CSS geralmente é a porta de entrada para quem está iniciando no universo da programação.

Prova disso é que temos alunos nesse exato momento que estão começando a programar e estão estudando HTML e CSS (talvez seja você).

E nesse artigo consideramos mostrar a você as melhores maneiras de programar e deixar sua escrita mais simples e prática.

Tudo pronto por ai para conhecer as melhores práticas de desenvolvimento web com HTML e CSS?

O que iremos aprender hoje?

// Um breve resumo do HTML5
// Melhores práticas em HTML
// Um breve resumo do CSS3
// Melhores práticas em CSS

Um breve resumo do HTML5

resumo html5

HTML5 é uma nova versão do HTML e do XHTML. O rascunho das especificações do HTML5 definem uma única linguagem que pode ser escrita em HTML e XML.

Um dos seus principais objetivos é facilitar a manipulação dos elementos, possibilitando o desenvolvedor modificar as características dos objetos de forma não intrusiva, fazendo com que isso fique transparente para o usuário final.

Diferente das versões anteriores, o HTML5 fornece ferramentas para o CSS e o Javascript fazerem seu trabalho da melhor maneira possível de forma que um web site ou aplicação continue leve e eficaz.

Melhores práticas em HTML

melhores praticas em html

Sempre utilize Indentação

Elementos dentro de outros elementos devem sempre ser indentados.

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

<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. É “regra” da SGML (Standard Generalized Markup Language).

E claro, fica bem mais elegante!

<div class=”aspasduplas”>

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

resumo 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

melhores praticas 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.

Leia também: Os 10 MELHORES Cursos de Programação para Aprender a Programar

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.

Conclusão das melhores práticas de desenvolvimento Web

conclusao de melhores praticas em desenvolvimento web

E ai, gostou de aprender sobre as melhores práticas de desenvolvimento Web?

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

Conheça o Pacote Full Stack que já mudou a vida de milhares de pessoas e pode mudar a sua também!

>> Acesse aqui o Pacote Full-Stack e entenda o motivo de nosso treinamento ser o mais requisitado do país. <<