Posicionei ambos os elementos desta maneira e o resultados foram os mesmos. Não havendo a necessidade de insercao de classes no HTML e CSS. Em questoes de boas praticas qual delas eu poderia usar a descrita no curso ou a descrita abaixo?

<!-- Ambos recebem as mesmas propriedades--> 
label[for='nome']:before, label[for='email']:after {
    content: '';
    background-color:rgb(132, 33, 68);
    background-image: url(../imagens/usuario.png); 
    background-size: 50% 50%;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 2em;
    height: 2em;
    top: 100%; 
    left: 0;
}
<!-- Ambos recebem o mesmo posicionamento --> 
label[for='nome'],label[for='email']{
    position: relative
;}

<!-- Ambos recebem o mesmo calc e posicionamento --> 
#nome,#email{
    width: calc(100% - 2em);
    position: relative;
    left: 2em;
}
<!-- E po rultimo restando apenas sobrescrever background-image do before -->
label[for='email']:after{
    background-image: url(../imagens/email.png);
    bottom: 0;
}