Evite erros de CSS

Tradução e adaptação: Isabella Sánchez -

Especialistas revelam os enganos mais comuns e as soluções mais eficientes para deixar seu site rápido e seguro

Muitos anos se passaram desde a época em que a web era a terra de sites “em tabela”. Linguagens e técnicas surgiram para tornar a criação de páginas mais flexível. O web design se expandiu com novos atributos e a linguagem de estilo CSS chegou para embelezar e enriquecer websites. Mas como aproveitar da melhor forma todo o poder que essa tecnologia tem a oferecer? Evitar “CSS ruim” é sempre a melhor resposta e para cumprir essa missão, na Revista W edição 159, acompanhe os 10 maiores erros e as soluções para deixar seu site muito mais irressistível. Confira algumas dicas abaixo.

• Superespecificação

O problema com um CSS ruim é que ele gera mais CSS ruim. Por exemplo, você provavelmente já precisou consertar um bug e concluiu que precisava de um seletor que use ids, ou pior, que é preciso recorrer a um !important como uma última tentativa. O que esses exemplos têm em comum é que são sintomas de um grande problema: superespecificação. A especificação no CSS determina o quão específico você é quando está definindo suas declarações CSS:

#layout #header #title .logo a { display:
block; }

Quando esse seletor é lido da esquerda para a direita, o resultado deveria ser: “Na área do layout, na área do header, na área do título, na área do logo, para qualquer link (uma tag)”. É possível perceber que é uma necessidade muito específica. Especificar demais faz com que o seu CSS seja menos legível e gerenciável. Vamos olhar alguns hábitos ruins que cabem nessa categoria.

• Usar ids

Uma das camadas de especificação é o tipo de seletor construído: ids versus classes versus tags. Por exemplo:

#my-link { color: red; }
.my-link { color: green; }
a { color: blue; }

Como o primeiro está usando um id, ele é o mais específico dos três. Isso se deve aos ids serem capazes de ser usados apenas uma vez por página. Se temos o link abaixo:

<a href=”#” id=”my-link” class=”my-link”>Our
example link</a>

Que cor o texto teria, sem assumir outros estilos? O texto será vermelho. Segundo a especificação do CSS, o próximo estilo mais específico é a classe, e depois, a tag. O problema em usar ids no seu código é que raramente vemos o exemplo dado, com um seletor de id/ classe/tag em um item. Vemos com mais frequência ids usados como contexto:

#header a { border: 2px dashed #000; }

Vamos imaginar que isso está em um projeto. Depois, decidimos que não queremos um desses links no header tenha as bordas tracejadas. Rapidamente escrevemos para desfazer o estilo (outro hábito ruim):

.special-link { border: none; }

E a seguir colocamos o nosso link especial para aquela classe. Problema resolvido, certo? Não. Ids são tão específicas em CSS, que precisa muito mais do que isso para aproveitá-las. Para atingir nosso seletor inicial, precisamos escrever:

#header .special-link { border: none; }

Imagine esse cenário se repetindo várias vezes. E se há outro link que precisa de estilos diferentes do que a região? É por isso que usar id em CSS é um hábito tão ruim: porque uma vez que os ids estão lá, o problema se espalha. A maior parte dos ids no seu CSS são facilmente mudados para classes.

Estilos em linha são crimes graves de especificação e também violam a principal razão de usar CSS.

É importante que esses erros sejam percebidos antes que algo pior aconteça no site.

Leia na íntegra esta reportagem na Revista W edição 159

Confira também nesta edição:

- Google Analytics: Guia completo para você aprender a monitorar até a audiência de sites mobile.

- 25 dicas de HTML5: Novas técnicas para fazer pré-visualização de vídeos, comprimir tráfegos de rede e muito mais.

- Web design de sites: Inspire-se em 18 sites criativos de todo o mundo que usam JavaScript, CSS, HTML5 e CMS.

- Tutoriais:

• RWD: Desenvolva protótipos de estilos.
• App Mobile: Faça efeitos e animações com fontes de ícones.
• CSS: Crie e anime objetos em três dimensões.
• CSS3: Esqueça cálculos matemáticos e use a expressão :nth-of-type.
• GIT: Use este poderoso gerenciador de código fonte.
• jQuery: Aprenda CoffeeScript e ganhe tempo na programação.
• PHP: Entenda como o framework Silex pode construir aplicações.