Vamos ser realistas por um segundo aqui. No que diz respeito a linguagens da web, CSS é sem dúvida a mais simples. Quer dizer, sério, o que poderia ser mais fácil do que uma simples lista de propriedades que afetam um elemento?
E a sintaxe é quase como o inglês escrito. Quer mudar o tamanho da fonte? Há um font-size Propriedade CSS.
E a cor? Tem a color propriedade. Mas apesar de seu exterior enganosamente fácil, CSS é um sistema complicado, especialmente quando você está fazendo isso em um nível profissional, de alta escala e alto desempenho.
O grande número de maneiras de selecionar um elemento é incrível; sem mencionar o número de propriedades que você pode aplicar a esse conjunto de elementos selecionado e, então, como a apresentação muda quando você está falando sobre suporte a vários navegadores e mecanismos de layout. É fácil se atrapalhar com CSS. Aqui estão alguns erros comuns de CSS que todos nós cometemos.
1. Não usar um CSS Reset adequado
Os navegadores da Web são nossos amigos inconstantes. Suas inconsistências podem fazer qualquer desenvolvedor querer arrancar os cabelos. Mas, no final do dia, eles são o que apresentarão seu site, então é melhor você fazer o que tem que fazer para agradá-los.
Uma das coisas mais tolas que os navegadores fazem é fornecer estilo padrão para elementos HTML. Imagino que você não pode realmente culpá-los: e se um “webmaster” escolher não estilizar sua página? Tem que haver um mecanismo de fallback para pessoas que escolherem não usar CSS.
Em qualquer caso, raramente há um caso de dois navegadores fornecendo estilo padrão idêntico, então a única maneira real de garantir que seus estilos sejam eficazes é usar uma redefinição de CSS. O que uma redefinição de CSS implica é redefinir (ou melhor, contexto) todos os estilos de todos os elementos HTML para um valor de base previsível. A beleza disso é que, uma vez que você inclua uma redefinição de CSS efetivamente, você pode estilizar todos os elementos na sua página como se eles fossem todos iguais para começar.
É uma lousa em branco, na verdade. Existem muitas bases de código de redefinição CSS na web que você pode incorporar ao seu trabalho. Eu pessoalmente uso uma versão modificada do popular Eric Meyer reiniciado e Six Revisions usa uma versão modificada do YUI Reset CSS.
Você também pode construir sua própria redefinição se achar que funcionaria melhor. O que muitos de nós fazemos é utilizar um seletor universal simples de margem/redefinição de preenchimento.
* { margin:0; padding:0; }Embora isso funcione, não é uma redefinição completa. Você também precisa redefinir, por exemplo, bordas, sublinhados e cores de elementos como itens de lista, links e tabelas para não encontrar inconsistências inesperadas entre navegadores da web.
Saiba mais sobre como redefinir seus estilos neste guia: Redefinindo seus estilos com CSS Reset.
2. Seletores superqualificados
Ser muito específico ao selecionar elementos para estilizar não é uma boa prática. O seletor a seguir é um exemplo perfeito do que estou falando:
ul#navigation li a { ... }Normalmente, a estrutura de uma lista de navegação primária é uma (geralmente com um ID como #nav ou #navigation) então alguns itens da lista (
) dentro dela, cada um com seu próprio tag dentro dela que vincula a outras páginas.
Esta estrutura HTML está perfeitamente correta, mas o seletor CSS é realmente o que me preocupa. Primeiras coisas primeiro: Não há razão para o ul antes #navigation como um ID já é o seletor mais específico. Além disso, você não precisa colocar li na sintaxe do seletor porque todos os a os elementos dentro da navegação estão dentro de itens de lista, então não há razão para essa especificidade.
Assim, você pode condensar esse seletor como:
#navigation a { ... }Este é um exemplo excessivamente simplista porque você pode ter itens de lista aninhados que deseja estilizar de forma diferente (por exemplo, #navigation li a é diferente de #navigation li ul li a); mas se você não fizer isso, não há necessidade de especificidade excessiva.
Também quero falar sobre a necessidade de um ID nessa situação. Vamos supor por um minuto que essa lista de navegação esteja dentro de um header div (#header). Vamos supor também que você não terá nenhuma outra lista não ordenada no cabeçalho além da lista de navegação.
Se for esse o caso, podemos até remover o ID da lista não ordenada em nossa marcação HTML e então selecioná-lo em CSS assim:
#header ul a { ... }Aqui está o que eu quero que você tire deste exemplo: sempre escreva seus seletores CSS com o nível mínimo de especificidade necessário para que funcione. Incluir todo esse excesso pode fazer com que pareça mais seguro e precisomas quando se trata de seletores CSS, existem apenas dois níveis de especificidade: específicoe não específico o suficiente.
3. Não usar propriedades abreviadas
Dê uma olhada na seguinte lista de propriedades:
#selector { margin-top: 50px; margin-right: 0; margin-bottom: 50px; margin-left 0; }O que há de errado com esta imagem? Espero que os alarmes estejam tocando em sua cabeça enquanto você percebe o quanto estamos nos repetindo. Felizmente, há uma solução, e é usar Propriedades de abreviação CSS.
O seguinte tem o mesmo efeito que a declaração de estilo acima, mas reduzimos nosso código em três linhas.
#selector { margin: 50px 0; }Confira esta lista de propriedades que lidam com estilos de fonte:
font-family: Helvetica; font-size: 14px; font-weight: bold; line-height: 1.5;
Podemos condensar tudo isso em uma linha:
font: bold 14px/1.5 Helvetica;
Também podemos fazer isso para background propriedades. O seguinte:
background-image: url(background.png); background-repeat: repeat-y; background-position: center top;
Pode ser escrito em CSS abreviado como tal:
background: url(background.png) repeat-y center top;
Usando CSS abreviado melhora a eficiência e torna mais fácil manter nosso código. Para mais informações sobre propriedades de abreviação CSS, confira isto folha de dicas de propriedades abreviadas CSS.
4. Usando 0px em vez de 0
Digamos que você queira adicionar uma margem de 20px à parte inferior de um elemento. Você pode usar algo assim:
#selector { margin: 20px 0px 20px 0px; }Não faça isso. Isso é excessivo.
Não há necessidade de incluir o px depois 0. Embora isso possa parecer que estou sendo exigente e que pode não parecer muito, quando você está trabalhando com um arquivo enorme, remover todos aqueles itens supérfluos px pode reduzir o tamanho do seu arquivo (o que nunca é uma coisa ruim).
5. Usando nomes de cores em vez de hexadecimais
Declarando red para valores de cor é o homem preguiçoso #FF0000. Dizendo:
color: red;
Você está basicamente dizendo que o navegador deve exibir o que ele pensa vermelho é. Se você aprendeu alguma coisa fazendo as coisas funcionarem corretamente em todos os navegadores — e as horas de frustração que você acumulou por causa de um desalinhamento estúpido de lista-marcadores que só pode ser visto no IE7 — é que você nunca deve deixar o navegador decidir como exibir suas páginas da web.
Em vez disso, você deve se esforçar para encontrar o valor hexadecimal real para a cor que está tentando usar. Dessa forma, você pode ter certeza de que é a mesma cor exibida em todos os navegadores. Você pode usar uma folha de dicas de cores que fornece uma prévia e o valor hexadecimal de uma cor.
Isso pode parecer trivial, mas quando se trata de CSS, são as pequenas coisas que geralmente levam aos grandes problemas.
6. Seletores redundantes
Meu processo para escrever estilos é começar com toda a tipografia, depois trabalhar na estrutura e, finalmente, estilizar todas as cores e fundos. É isso que funciona para mim. Como não foco em apenas um elemento por vez, geralmente acabo digitando acidentalmente uma declaração de estilo redundante.
Eu sempre faço uma verificação final depois que termino para ter certeza de que não repeti nenhum seletor; e se tiver, eu os mesclarei. Esse tipo de erro é aceitável de se cometer enquanto você está desenvolvendo, mas tente garantir que eles não entrem em produção. Confira esta lista de otimizadores CSS que podem ajudar você a automatizar a busca por seletores ineficientes e redundantes.
7. Propriedades redundantes
Semelhante ao acima, muitas vezes me vejo tendo que aplicar as mesmas propriedades a vários seletores. Isso poderia ser estilizar um no cabeçalho para ficar exatamente igual ao no rodapé, fazendo o
‘s and ‘s the same size, or any number of things in between. In the final review of my CSS, I will look to make sure that I haven’t repeated too many properties.
For example, if I see two selectors doing the same thing, such as this:
#selector-1 { font-style: italic; color: #e7e7e7; margin: 5px; padding: 20px } .selector-2 { font-style: italic; color: #e7e7e7; margin: 5px; padding: 20px }Vou combiná-los, com os seletores separados por uma vírgula (,):
#selector-1, .selector-2 { font-style: italic; color: #e7e7e7; margin: 5px; padding: 20px }Espero que você esteja vendo a tendência aqui: tente ser o mais conciso e eficiente possível. Isso paga dividendos em tempo de manutenção e velocidade de carregamento de página.
8. Não fornecer fontes de fallback
Em um mundo perfeito, cada computador sempre teria todas as fontes que você gostaria de usar instaladas. Infelizmente, não vivemos em um mundo perfeito. @font-face à parte, os web designers estão praticamente limitados às poucas fontes ditas seguras para a web (por exemplo,
Arial, Georgia, serif, etc.). Mas há um lado positivo. Você ainda pode usar fontes como Helvetica, que não são necessariamente instaladas em todos os computadores.
O segredo está em pilhas de fontes. Pilhas de fontes são uma maneira de os desenvolvedores fornecerem fontes de fallback para o navegador exibir se o usuário não tiver a fonte preferida instalada. Por exemplo:
#selector { font-family: Helvetica; }Pode ser expandido com fontes alternativas como:
#selector { font-family: Helvetica, Arial, sans-serif; }Agora, se o usuário não tiver Helvetica, ele pode ver seu site em Arial, e se isso não funcionar, ele simplesmente usará como padrão qualquer fonte sans-serif instalada. Ao definir fontes de fallbackvocê ganha mais controle sobre como suas páginas da web são renderizadas.
9. Espaço em branco desnecessário
Quando se trata de tentar reduzir o tamanho dos seus arquivos CSS para desempenho, cada espaço conta. Quando você está desenvolvendo, não tem problema formatar seu código da maneira que você se sentir confortável. No entanto, não há absolutamente nenhuma razão para não tirar os caracteres em excesso (um processo conhecido como minificação) quando você realmente envia seu projeto para a web, onde o tamanho dos seus arquivos realmente importa.
Muitos desenvolvedores simplesmente não minificam seus arquivos antes de lançar seus sites, e eu acho que isso é um erro enorme. Embora possa não parecer que faça muita diferença, quando você tem arquivos CSS enormes, isso pode melhorar os tempos de resposta da sua página.
10. Não organizar seu CSS de forma lógica
Quando estiver escrevendo CSS, faça um favor a si mesmo e organize seu código. Por meio de comentários, você pode garantir que, na próxima vez que fizer uma alteração em um arquivo, ainda será capaz de navegar nele. Como você escolhe organizar seus estilos depende completamente de você, o que funcionar.
Eu pessoalmente gosto de organizar meus estilos pela forma como o HTML que estou estilizando é estruturado. Isso significa que tenho comentários que distinguem o cabeçalho, o corpo, a barra lateral e o rodapé. Um erro comum de autoria de CSS que vejo é as pessoas simplesmente escrevendo seus estilos assim que pensam neles.
Da próxima vez que você tentar alterar algo e não conseguir encontrar a declaração de estilo, você estará se amaldiçoando silenciosamente por não organizar seu CSS bem o suficiente.
11. Usando apenas uma folha de estilo para tudo
Este é subjetivo, então tenha paciência comigo enquanto eu lhe dou minha perspectiva. Eu acredito, assim como outros, que é melhor dividir as folhas de estilo em algumas diferentes para sites grandes para facilitar a manutenção e para melhor modularidade. Talvez eu tenha uma para uma redefinição de CSS, uma para correções específicas do IE e assim por diante.
Ao organizar o CSS em folhas de estilo diferentes, saberei imediatamente onde encontrar um estilo que desejo alterar. Você pode fazer isso importando todas as folhas de estilo para uma folha de estilo como esta:
@import url("reset.css"); @import url("ie.css"); @import url("typography.css"); @import url("layout.css");Deixe-me enfatizar, no entanto, que é isso que funciona para mim e para muitos outros desenvolvedores. Você pode preferir comprimir tudo em um arquivo, e tudo bem; não há nada de errado nisso.
Mas se você estiver tendo dificuldades em manter um único arquivo, tente dividir seu CSS.
12. Não fornecer uma folha de estilo de impressão
Para estilizar seu site em páginas que serão impressas, tudo o que você precisa fazer é utilizar e incluir uma folha de estilo de impressão. É tão fácil quanto:
media="print" />
Usar uma folha de estilo para impressão permite que você esconda elementos que não deseja imprimir (como seu menu de navegação), redefina a cor de fundo para branco, forneça tipografia alternativa para parágrafos para que seja mais adequado em um pedaço de papel e assim por diante. O importante é que você pense em como sua página ficará quando impressa.
Muitas pessoas simplesmente não pensam nisso, então seus sites serão impressos da mesma forma que você os vê na tela.
Por que é importante usar um CSS Reset?
É importante usar um CSS Reset para garantir que os estilos aplicados aos elementos HTML sejam consistentes em todos os navegadores e plataformas.
O que são seletores superqualificados?
Seletores superqualificados são seletores CSS que são excessivamente específicos, o que pode tornar o código mais complicado e difícil de dar manutenção.
Por que devo usar propriedades abreviadas em CSS?
Usar propriedades abreviadas em CSS pode reduzir a quantidade de código necessária e tornar o código mais eficiente e fácil de manter.
Qual é a diferença entre usar "0" e "0px" em CSS?
Ao usar valores de “0” em propriedades como margens e preenchimentos em CSS, não é necessário incluir a unidade de medida “px”, o que pode otimizar o código.
Por que devo usar valores hexadecimais em vez de nomes de cores em CSS?
Usar valores hexadecimais em CSS garante consistência na exibição de cores em diferentes navegadores e plataformas, evitando possíveis problemas de renderização.
Como fazer SEO: um guia para iniciantes e novatos em SEO
Tutorial de otimização de mecanismos de pesquisa: como fazer SEO
Como mapear palavras-chave em seu site
Você pode fazer SEO sozinho? Sim! Faça você mesmo SEO com este guia completo.
