Pseudo-elementos parte 2: quando usar?

Olá! Interessado no assunto de pseudo-elementos? Esse é o segundo artigo sobre o assunto, e nele eu já não explico muito o que são pseudo-elementos, e sim quando é recomendado usá-lo e não usá-lo. Antes de ler esse artigo, recomendo ler minha introdução ao assunto: Pseudo-elementos parte 1: o que são?

Bom, se você está aqui, imagino que já saiba o básico sobre pseudo-elementos. Então vou direto ao ponto do artigo. Quando usá-los e quando não usá-los.

Quando usar?

Use o pseudo-elemento quando você quiser afetar um elemento já existente. Pseudo-elementos são ótimos para a separação de conteúdo vs design.

Exemplo 1: Adicionar um ícone à frente de um texto com :before faz com que você não precise inseri-lo diretamente no HTML. Dessa forma, você está vinculando aquele novo elemento ao elemento já criado. Ele serve como modificador do elemento verdadeiro.

Exemplo 2: Quando se quer criar adornos à uma div, como uma borda diferenciada. Com :before e :after, você pode criar até bordas em degradê.

Exemplo 3: Qualquer outro modificador que você não queria um markup no seu HTML, como mencionei no primeiro exemplo. Por exemplo, aquelas aspas legais que as pessoas usam quando vão usar blockquote. É muito mais legal usar um :before com absolute e left 0, o pai relativo ao invés de simplesmente inserir um img no começo da div.

Quando não usar?

Evite usar :before e :after quando não se está modificando um elemento já existente. Se sua intenção é criar um elemento novo e independente, simplesmente crie este elemento. Vinculá-lo desnecessariamente a outro elemento só irá causar confusão se não for necessário. Qualquer tipo de elemento independente deve ser um elemento independente, e não um pseudo-elemento.

Exemplo 1: Não use de maneira alguma pseudo-elemento caso você queira inserir um texto que seja relevante para SEO. Enquanto pseudo-elementos são renderizados na tela, eles são carregados com o CSS e não com o HTML. Os robôs do Google varrem sua página lendo apenas seu HTML, e não seu CSS. Se você esconder seu conteúdo no seu CSS, o robozinho simplesmente não tem como achá-lo.

Exemplo 2: Se você precisar fazer alguma coisa com esse elemento em JavaScript (e não com o elemento-verdadeiro-pai), não use pseudo-elemento. É possível fazer um get em um pseudo-elemento, mas se isso se faz necessário, ele não é um elemento cuja única serventia é intrinsecamente relacionada ao pai, e por isso deve ser um elemento individual.

Minha dica é basicamente essa: se não existe necessidade alguma de criar um markup no HTML para aquele elemento, se ele não é necessário para SEO e se ele é um modificador para um outro elemento verdadeiro, use o pseudo-elemento. Caso contrário, use um elemento normal. Não use um pseudo-elemento só porque parece “chique”.

Outra dica é pensar em pseudo-elementos como fantasmas. Um fantasma precisa estar vinculado à alguma coisa ou alguém para poder assombrá-lo. Se sua intenção não é assombrar ninguém, você não precisa de um fantasma.

Confira perguntas frequentes sobre o assunto no terceiro e último post sobre o assunto, Pseudo-elementos parte 3: perguntas frequentes.