Não estou conseguindo compreender sobre a divisão de comandos nas classes, por exemplo como foi feito em aula para a classe .produtos onde vamos indicando as margens, pois ao meu ver, tudo que esta em cascata pra "dentro" do ul class="produtos" já é algo que esteja dentro de li, então porque precisamos criar uma nova discriminação para .produtos li? Alguém pode me auxiliar comentando como são as considerações do comando no css? Obrigado desde já!

CSS:

.produtos{
    width: 940px;
    margin: 0 auto;
    padding: 50px 0;
}


.produtos li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
}

HTML:

<ul class="produtos">
                <li>
                    <h2>Cabelo</h2>
                    <img src="cabelo.jpg">
                    <p class="produto-descricao">Na tesoura ou na máquina, como o cliente preferir</p>
                    <p class="produto-preço">R$ 25,00</p>
                </li>
                <li>
                    <h2>Barba</h2>
                    <img src="barba.jpg">
                    <p class="produto-descricao">Corte e desenho profissional de barba</p>
                    <p class="produto-preço">R$ 18,00</p>
                </li>
                <li>
                    <h2>Cabelo + Barba</h2>
                    <img src="cabelo+barba.jpg">
                    <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                    <p class="produto-preço">R$ 35,00</p>
                </li>
            </ul>