Quais as vantagens 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!