Escrever o seu melhor código
Há muito a aprender - elementos, atributos, propriedades, valores e mais diferentes - para escrever HTML e CSS. Cada lição até este ponto teve o principal objetivo de explicar esses vários componentes de HTML e CSS, na esperança de ajudá-lo a entender os fundamentos básicos de ambos os idiomas. Esta lição dá um passo atrás e olha para uma imagem mais abstrata de HTML e CSS.
Mais especificamente, esta lição concentra-se nas melhores práticas de codificação para HTML e CSS. Essas práticas de codificação servem como uma estrutura abrangente para escrever HTML e CSS. Eles se aplicam a cada lição e sempre devem ser mantidos em mente durante a programação.
Quando você está revisando essas melhores práticas, pense em como eles podem ser usados em outras áreas ou linguagens de programação também. Por exemplo, o uso de comentários para organizar o código (como abordamos nesta lição) é benéfico em todas as linguagens de programação. Mantenha uma mentalidade aberta e considere como você pode utilizar completamente cada prática.
Práticas de codificação HTML
Muitas das melhores práticas de codificação enfatizam manter o código bem organizado. As práticas gerais no HTML não são diferentes. O objetivo é escrever uma marcação bem estruturada e compatível com padrões. As diretrizes aqui descritas fornecem uma breve introdução às práticas de codificação HTML. Esta não é de maneira alguma uma lista exaustiva.
Write Standards-Compliant Markup
O HTML, por natureza, é um linguagem indulgente que permite que o código deficiente seja executado e renderizado em diferentes níveis de precisão. A renderização bem sucedida, no entanto, não significa que o nosso código seja semanticamente correto ou garanta que ele seja validado como compatível com padrões. Além disso, o código fraco é imprevisível, e você não pode ter a certeza do que você vai conseguir quando ele renderizar. Temos que prestar muita atenção ao escrever HTML e certifique-se de juntar e fechar todos os elementos corretamente, usar IDs e classes adequadamente e sempre validar o código.
O código a seguir tem vários erros, incluindo o uso do valor do ID da introdução de ID várias vezes quando deve ser um valor exclusivo, fechando os elementos <p> e <strong> na ordem errada no primeiro parágrafo e não fechando o <p> elemento no segundo parágrafo.
Código Errado
<p id="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</p>.</strong>
<p id="intro">The caramel apple cider is delicious.
Código Certo
<p class="intro">New items on the menu today include <strong>caramel apple cider and breakfast crepes</strong>.</p>
<p class="intro">The caramel apple cider is delicious.</p>
Faça uso de elementos semânticos
A biblioteca de elementos em HTML é bastante grande, com mais de 100 elementos disponíveis para uso. Decidir quais os elementos a usar para descrever conteúdo diferente pode ser difícil, mas esses elementos são a espinha dorsal da semântica. Precisamos de pesquisar e verificar novamente o nosso código para garantir que estamos a usar os elementos semânticos adequados. Os utilizadores vão nos agradecer, a longo prazo, pela construção de um site mais acessível, e o seu HTML provavelmente será mais fácil de usar. Se você nunca tiver certeza do seu código, encontre um amigo para o ajudar e executar revisões de código de rotina.
Aqui o HTML não usa os elementos apropriados do título e do parágrafo, em vez disso ele usa elementos sem sentido para modelar e agrupar conteúdo.
Código Errado
<span class="heading"><strong>Welcome Back</span></strong>
<br><br>
It has been a while. What have you been up to lately?
<br><br>
Código Certo
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
Use a estrutura de documento apropriada
Como mencionado anteriormente, o HTML é um idioma tolerante, portanto, as páginas serão renderizadas sem os elementos <! DOCTYPE html> doctype ou <html>, <head> e <body>. Sem um tipo de letra e esses elementos estruturais, as páginas não serão processadas corretamente em todos os browsers.
Devemos sempre ter a certeza que usamos a estrutura adequada do documento, incluindo os elementos <! DOCTYPE html> doctypee <html>, <head> e <body>. Fazendo isso, as normas das nossas páginas são compatíveis e totalmente semânticas, e ajuda a garantir que elas serão renderizadas conforme desejamos.
Código Errado
<html>
<h1>Hello World</h1>
<p>This is a web page.</p>
</html>
Código Certo
<!DOCTYPE html>
<html>
<head>
`<title>Hello World</title>`
</head>
<body>
`<h1>Hello World</h1>`
`<p>This is a web page.</p>`
</body>
</html>
Mantenha a sintaxe organizada
À medida que as páginas crescem, o organização do HTML pode se tornar numa grande tarefa. Felizmente, existem algumas regras rápidas que podem nos ajudar a manter a nossa sintaxe limpa e organizada. Estes incluem o seguinte:
- Use letras minúsculas dentro de nomes de elementos, atributos e valores;
- Elementos juntos de recuo;
- Usar estritamente aspas duplas, citações não simples ou omitidas;
- Remova a barra para a frente no final dos elementos de auto-fecho;
- Omita os valores em atributos booleanos.
Observar estas regras ajudará a manter o nosso código limpo e legível. Olhando para os dois conjuntos de HTML aqui, o código bom é mais fácil de digerir e entender.
Código Errado
<Aside>
<h3>Chicago</h3>
<H5 HIDDEN='HIDDEN'>City in Illinois</H5>
<img src=chicago.jpg alt="Chicago, the third most populous city in the United States" />
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</ASIDE>
Código Certo
<aside>
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
`<li>234 square miles</li>`
`<li>2.715 million residents</li>`
</ul>
</aside>
Use ID prática e valores de classe
Criar ID e valores de classe podem ser uma das partes mais difíceis de escrever HTML. Esses valores precisam de ser práticos, relacionados ao conteúdo em si, e não ao estilo do conteúdo. Usar um valor de vermelho para descrever texto vermelho não é ideal, pois descreve a apresentação do conteúdo. O estilo do texto precisa sempre de ser alterado para azul, não só o CSS precisa ser alterado, como também o HTML em todas as instâncias onde existe a classe vermelha.
O HTML aqui pressupõe que a mensagem de alerta será vermelha. No entanto, se o estilo do alerta mudar para laranja, o nome da classe de vermelho deixará de ter sentido e provavelmente causará confusão.
Código Errado
<p class="red">Error! Please try again.</p>
Código Certo
<p class="alert">Error! Please try again.</p>
Use o atributo de texto alternativo em imagens
As imagens devem sempre incluir o atributo alt. Leitores de tela e outros softwares de acessibilidade dependem do atributo alt para fornecer contexto para imagens.
O valor do atributo alt deve ser muito descritivo do que a imagem contém. Se a imagem não contém qualquer relevância, o atributo alt ainda deve ser incluído, no entanto, o valor deve ser deixado em branco para que os leitores o ignorem em vez de ler o nome do arquivo de imagem.
Além disso, se uma imagem não tem um valor significativo, talvez seja parte da interface do utilizador, por exemplo deve ser incluída como uma imagem de fundo CSS, se possível, não como um elemento <img>.
Código Errado
<img src="puppy.jpg">
Código Certo
<img src="puppy.jpg" alt="A beautiful, two-year-old hound mix puppy">
Conteúdo separado do estilo
Nunca use estilos inline dentro do HTML. Isso cria páginas que levam mais tempo para carregar, são difíceis de manter e causam dores de cabeça para designers e desenvolvedores. Em vez disso, use folhas de estilo externas, usando classes para direcionar elementos e aplique estilos conforme necessário.
Aqui, as alterações desejadas aos estilos dentro do código incorreto devem ser feitas no HTML. Consequentemente, esses estilos não podem ser reutilizados, e a consistência dos estilos provavelmente sofrerá.
Código Errado
<p style="color: #393; font-size: 24px;">Thank you!</p>
Código Certo
<p class="alert-success">Thank you!</p>
Evite um Caso de "Divíssima"
Ao escrever HTML, é fácil deixar se levar e adicionar um elemento <div> aqui e um elemento <div> para construir os estilos necessários. Enquanto isso funciona, pode adicionar um pouco de inveja a uma página e, antes de muito tempo, não temos certeza do que cada elemento <div> faz.
Precisamos de fazer o nosso melhor para manter o nosso código e reduzir a marcação, amarrando vários estilos para um único elemento sempre que possível. Além disso, devemos usar os elementos estruturais HTML5 quando adequados.
Código Errado
<div class="container">
<div class="article">
`<div class="headline">Headlines Across the World</div>`
</div>
</div>
Código Certo
<div class="container">
<article>
`<h1>Headlines Across the World</h1>`
</article>
</div>
Continuamente Código de Refator
Ao longo do tempo, os sites e as bases de código continuam a evoluir e crescer, deixando para trás um pouco de cruft. Lembre-se de remover o código antigo e os estilos conforme necessário ao editar uma página. Vamos também ter tempo para avaliar e refactorizar o nosso código depois de escrevê-lo, procurando maneiras de condensá-lo e torná-lo mais gerivel.
Práticas de codificação CSS
Semelhante aos do HTML, as práticas de codificação para CSS concentram-se em manter o código bem organizado. O CSS também possui alguns princípios adicionais sobre como trabalhar com algumas das complexidades do idioma.
Organizar o código com comentários
Os arquivos CSS podem tornar-se bastante extensos, abrangendo centenas de linhas. Esses arquivos grandes podem tornar a descoberta e edição dos nossos estilos quase impossíveis. Vamos manter os nossos estilos organizados em grupos lógicos. Então, antes de cada grupo, vamos colocar um comentário, observando o que os seguintes estilos pertencem.
Se desejarmos, também podemos usar comentários para criar uma tabela de conteúdo no topo do nosso arquivo. Ao fazer isso vai nos lembrar exatamente o que está contido no arquivo e onde os estilos estão localizados.
Código Errado
header { ... }
article { ... }
.btn { ... }
Código Certo
/* Primary header */
header { ... }
/* Featured article */
article { ... }
/* Buttons */
.btn { ... }
Escreva CSS usando várias linhas e espaços
Ao escrever CSS, é importante colocar cada seletor e declaração numa nova linha. Então, dentro de cada seletor, queremos recuar as nossas declarações.
Após um seletor e antes da primeira declaração, o suporte de curvatura de abertura, {, que deve ter um espaço antes dele. Dentro de uma declaração, precisamos colocar um espaço após o cólon:: que segue uma propriedade e encerra cada declaração com um ponto-e-vírgula;
Ao fazê-lo, o código é fácil de ler, bem como editar. Quando todo o código é empilhado numa única linha sem espaços, é difícil encontrar e fazer alterações.
Código Errado
a,.btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}
Código Certo
a,
.btn {
background: #aaa;
color: #f60;
font-size: 18px;
padding: 6px;
}
Comentários e espaços
Essas duas recomendações, organizando o código com comentários e usando múltiplas linhas e espaços, não são apenas aplicáveis ao CSS, mas também ao HTML ou a qualquer outro idioma. No geral, precisamos de manter o nosso código organizado e bem documentado. Se uma parte específica do nosso código é mais complexa, vamos explicar como é que ela funciona e onde ela se aplica nos comentários. Isso ajuda os outros a trabalhar na mesma base de código, assim como a nós mesmos, quando revemos o nosso próprio código.
Use nomes de classe adequados
Os nomes de classe (ou valores) devem ser modulares e devem pertencer ao conteúdo de um elemento, não a aparência, tanto quanto possível. Esses valores devem ser escritos de forma a assemelhar-se à sintaxe da linguagem CSS. Consequentemente, os nomes de classe devem ser todos em minúsculas e devem usar delimitadores de hífen.
Código Errado
.Red_Box { ... }
Código Certo
.alert-message { ... }
Desenvolver Seletores Proficientes
Os seletores CSS podem ficar fora de controlo se não forem cuidadosamente mantidos. Eles podem facilmente tornar-se muito longos e também específicos da localização.
Quanto mais tempo um seletor é e quanto mais pré-qualificadores incluir, maior especificidade irá conter. E quanto maior a especificidade, mais provável é que um seletor seja para quebrar a cascata CSS e causar problemas indesejáveis.
Também em consonância com a minimização da especificidade dos nossos seletores, não vamos usar IDs dentro dos nossos seletores. Os IDs são excessivamente específicos, aumentam rapidamente a especificidade de um seletor e muitas vezes quebram a cascata dentro dos nossos arquivos CSS. Os contras superam os profissionais com IDs e somos sábios para evitá-los.
Vamos usar seletores mais curtos e principalmente diretos. Anote-os apenas de dois a três níveis de profundidade e remova o máximo possível de seletores qualificados.
Código Errado
#aside #featured ul.news li a { ... }
#aside #featured ul.news li a em.special { ... }
Código Certo
.news a { ... }
.news .special { ... }
Use Classes específicas quando necessário
Há momentos em que um seletor CSS é tão longo e específico que não faz mais sentido. Isso cria um atraso no desempenho e é árduo para gerir. Neste caso, é aconselhável usar apenas uma aula. Ao aplicar uma classe ao elemento segmentado pode criar mais código dentro do HTML, ele permitirá que o código seja processado mais rápido e eliminará os obstáculos de gerencia.
Por exemplo, se um elemento <em> estiver junto dentro de um elemento <h1> dentro de um elemento <aside>, e tudo isso estiver junto dentro de um elemento <section>, o seletor pode parecer algo parecido com h1. Caso o elemento <em> seja removido do elemento <h1>, os estilos não serão mais aplicados. Um seletor melhor e mais flexível usaria uma classe, como o deslocamento de texto, para direcionar o elemento <em>.
Código Errado
section aside h1 em { ... }
Código Certo
.text-offset { ... }
Use Propriedades e Valores da Estanquia
Uma característica do CSS é a capacidade de usar propriedades e valores abreviados. A maioria das propriedades e valores possuem alternativas de abreviaturas aceitáveis. Como exemplo, ao invés de usar quatro declarações de propriedades e valores diferentes baseadas em margem para definir as margens em torno dos quatro lados de um elemento, use uma única propriedade de margem e uma declaração de valor que estabeleça os valores para os quatro lados ao mesmo tempo. Usar a alternativa abreviada permite-nos definir e identificar rapidamente os estilos.
Quando estamos a estabelecer somente um valor, as alternativas abreviadas não devem ser usadas. Se uma caixa só precisa de uma margem inferior, use a propriedade de margem inferior apenas. Isso garante que outros valores de margem não sejam substituídos, e podemos identificar facilmente de qual lado a margem está a ser aplicada sem muito esforço cognitivo.
Código Errado
img {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
button {
padding: 0 0 0 20px;
}
Código Certo
img {
margin: 5px 10px;
}
button {
padding-left: 20px;
}
Usar valores de cor hexagonal da taquixaxia
Quando disponível, use o tamanho de cor hexadecimal de taquigrafia de três caracteres e use sempre caracteres em minúsculas dentro de qualquer valor de cor hexadecimal. A ideia é permanecer consistente, evitar confusão e abraçar a sintaxe do idioma em que o código está sendo escrito.
Código Errado
.module {
background: #DDDDDD;
color: #FF6600;
}
Código Certo
.module {
background: #ddd;
color: #f60;
}
Solte as unidades de valores zero
Uma maneira de reduzir facilmente a quantidade de CSS que escrevemos é remover a unidade de qualquer valor zero. Não importa qual unidade de comprimento que esteja a ser usada - pixels, percentagens e por ai a diant, zero é sempre zero. Adicionar a unidade é desnecessário e não fornece nenhum valor adicional.
Código Errado
div {
margin: 20px 0px;
letter-spacing: 0%;
padding: 0px 5px;
}
Código Certo
div {
margin: 20px 0;
letter-spacing: 0;
padding: 0 5px;
}
Agrupar e Alinhar Prefixos de Fornecedores
Com o CSS3, os prefixos dos fornecedores ganharam popularidade, adicionando um pouco de código aos arquivos CSS. O trabalho adicional de usar prefixos de fornecedores costuma valer os estilos gerados, no entanto eles devem ser mantidos organizados. De acordo com o objetivo de escrever código que é fácil de ler e modificar, é melhor agrupar e recuar prefixos de fornecedores individuais para que os nomes de propriedade se empilhem verticalmente, assim como os seus valores.
Dependendo de onde o prefixo do fornecedor é colocado, na propriedade ou no valor, o alinhamento pode variar. Por exemplo, o seguinte código mantém a propriedade de fundo alinhada à esquerda, enquanto as funções de gradiente linear () prefixadas são recuadas para manter os seus valores verticalmente empilhados. Em seguida, a propriedade de tamanho de caixa prefixada é recuada conforme necessário para manter as propriedades de tamanho da caixa e os valores empilhados verticalmente.
Como sempre, o objetivo é tornar os estilos mais fáceis de ler e editar.
Código Errado
div {
background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
background: -moz-linear-gradient(#a1d3b0, #f6f1d3);
background: linear-gradient(#a1d3b0, #f6f1d3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Código Certo
div {
background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
background: -moz-linear-gradient(#a1d3b0, #f6f1d3);
background: linear-gradient(#a1d3b0, #f6f1d3);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
`box-sizing: border-box;`
}
Prefixos do fornecedor
Ao usar os prefixos do fornecedor, precisamos de ter a certeza de colocar uma versão não pré-definida da nossa propriedade e o valor final, após qualquer versão prévia. Isso garante que os browsers que suportam a versão não pré-definida renderizarão esse estilo de acordo com sua colocação dentro da cascata, lendo estilos da parte superior do arquivo para a parte inferior.
A boa notícia é que os browsers estão em grande parte afastando-se do uso de prefixos de fornecedores. Ao longo do tempo, isso se tornará menos preocupante, no entanto por enquanto estamos bem avisados para verificar novamente quais os estilos que exigem um prefixo de fornecedor e manter esses prefixos organizados.
Modularizar estilos para reutilizar
O CSS é construído para permitir que os estilos sejam reutilizados, especificamente com o uso de classes. Por esse motivo, os estilos atribuídos a uma classe devem ser modulares e disponíveis para compartilhar elementos conforme necessário.
Se uma seção de notícias for apresentada dentro de uma caixa que inclua uma borda, cor de fundo e outros estilos, a classe de notícias pode parecer uma boa opção. No entanto, esses mesmos estilos também podem ser aplicados a uma seção de eventos futuros. A classe de notícias não cabe neste caso. Uma classe de feat-box faria mais sentido e pode ser amplamente utilizada em todo o site.
Código Errado
.news {
background: #eee;
border: 1px solid #ccc;
border-radius: 6px;
}
.events {
background: #eee;
border: 1px solid #ccc;
border-radius: 6px;
}
Código Certo
.feat-box {
background: #eee;
border: 1px solid #ccc;
border-radius: 6px;
}
Sumário
Felizmente, os princípios da escrita de HTML e CSS bonitos estão a começar a ficar claros aqui. Embora cada idioma tenha suas as próprias complexidades, a maioria dessas práticas pode ser compartilhada entre os dois idiomas e muitas outras linguagens de computador.
Individualmente, precisamos de fazer o nosso melhor para manter essas práticas e, ao trabalhar em equipa, precisamos de fazer o nosso melhor para ajudar a educar a equipa sobre essas práticas também. Da mesma forma, as equipas podem ter sugestões e práticas valiosas que devemos trabalhar juntas para seguir.
Para destacar alguns dos temas gerais desta lição, nosso HTML e CSS devem sempre:
- Seja bem organizado, de modo que seja fácil de ler, editar e manter;
- Seja modular e flexível, permitindo reutilizar o código e os padrões, conforme necessário;
- Parece como se uma pessoa escrevesse, mesmo que várias pessoas contribuíssem.
Essas práticas são apenas o começo e, à medida que as línguas evoluem e escrevemos mais e mais HTML e CSS, desenvolveremos novas. Tudo faz parte da beleza de saber HTML e CSS. Agora você está equipado com algum conhecimento muito poderoso sobre como criar sites com HTML e CSS.