Práticas no Desenvolvimento HTML e CSS
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
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
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”>aa
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.
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.
Conclusão das melhores práticas de desenvolvimento Web
E ai, gostou de aprender sobre as melhores práticas de desenvolvimento Web?
Que Tal Conhecer Mais Sobre Desenvolvimento de Softwares? Ou Mesmo Entender Sobre Programação?
Conheça o Pacote Full-Stack MASTER da Danki.Code, onde você aprende programação desde o absoluto ZERO ao Nível Avançado.
São +18 CURSOS em Mais de +2500 Aulas e Tudo com Suporte Individual Personalizado, Certificados, Satisfação Garantida 
Ou o Seu Dinheiro de Volta!
Clique em Saiba Mais e Veja Quem Você Pode se Tornar!
Curta e Compartilha!
Não esqueça de deixar sua opinião nos comentários, e claro, de compartilhar o conteúdo com um a amigo que se interesse! 😊👇
Descubra mais sobre Cantinho Binário
Assine para receber nossas notícias mais recentes por e-mail.