Olá, não estou entendo muito bem a vantagem de se utilizar pseudo-elementos e atributos customizáveis.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá, não estou entendo muito bem a vantagem de se utilizar pseudo-elementos e atributos customizáveis.
Oi Danilo, tudo bem?
Pegando esse exemplo da apostila de HTML da Caelum. Pra deixar a primeira letra da frase diferente precisaríamos ter que criar um elemento somente para isso, algo assim:
<p><span>A</span> Caelum tem os melhores cursos!</p>
Mas HTML é para marcação de conteúdo, estilo é com o CSS. Então para separar as responsabilidades poderíamos nessa situação usar um pseudo-elemento, o first-letter.
p:first-letter {
font-size: 200%;
}
Separamos as responsabilidades, deixando nosso HTML mais semântico.
Atributos customizáveis é uma boa para organização quando estamos fazendo a parte da interação com JavaScript (JS). Se você precisa pegar diversas informações de um elemento, fica mais fácil com o custom data attribute no lado do JS. Nesse link anterior tem uns exemplos bacanas direto do MDN.
Espero ter ajudado e bons estudos,
Abcs!