Olá a todos. Perdão pela duvida boba (pra mim tá longe de ser hehehe), mas no video é dito que esse não é um bom uso do nesting:
.menu-principal {
...
.menu-principal a {
color: white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
div {
color: red;
p {
font-size: 10px;
span {
font-weight: bold;
}
}
}
}
}Qual seria então um modo correto ?
Obrigado desde já.
Mauricio, boa tarde!
Essa não é uma boa prática porque quando o SASS for processado, o CSS gerado vai ficar com os seletores muito grande. Olha o exemplo desse seletor css gerado pelo scss que você nos passou
.menu-principal .menu-principal a div p span {
font-weight: bold;
}Olha o tamanho desse seletor, primeiro ele vai buscar todos os spans do html, aí ele vai ver quais deles estão dentro de um p e qual desses p estão dentro de um div e assim por diante.
Isso seria uma má pratica em questão de performance.
Uma solução seria só colocar uma classe na tag span, e aí você teria o mesmo resultado. É mais performático
Espero ter ajudado e bons estudos!