.principal p, strong e em não pode ficar numa única linha?

Oi Tatiana, tudo bom?

Na verdade esses dois códigos não causam o mesmo efeito, vou te explicar o porquê!

O fato de repetir a classe .principal não altera nada, estamos dando apenas mais especificidade. Veja que mesmo repetindo a classe, sempre temos algum elemento diferente depois!

Logo, o elemento p terá uma margem de 1em para baixo, mas o elemento strong não terá essa margem, ele terá apenas um negrito em sua fonte, assim como o elemento 'em' será itálico. A classe dos elementos é a mesma (principal), porém as tags são diferentes, e para cada tag queremos algum estilo.

Se colocarmos esse código:

.principal p, strong, em {
   margin: 0 0 1em;
   font-weight: bold;
   font-style: italic;
  }

O parágrafo da classe principal, todos os 'strong' do HTML, e todos os 'em' do HTML, terão o mesmo estilo, e não é bem isso que queremos, queremos um determinado estilo para cada tag, por isso nós usamos seletores separados, como:

.principal p {
    margin: 0 0 1em;
}

.principal strong  {
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

Não queremos que o parágrafo seja itálico, por exemplo. Queremos que apenas o elemento 'em' seja itálico, e se escrevermos tudo em um bloco só, isso não acontece. Todos terão o mesmo estilo.

Além disso, na sua solução proposta, você está pegando os parágrafos da classe principal, correto, mas o strong e o em não são da classe principal, pois você não definiu como. Vai ser selecionando todos os 'strong' e 'em' do nosso documento HTML, para arrumar isso, seria:

.principal p, .principal strong, .principal em {
   margin: 0 0 1em;
   font-weight: bold;
   font-style: italic;
  }

Espero ter ajudado =) Qualquer outra dúvida me retorne!

Olá Tatiana, tudo bem?

O instrutor separou o.principalem três estilos, com o intuito de estilizar pontos específicos da <div class="principal">.

Caso tudo estivesse escrito em um único bloco, as propriedades como o font-weight: bold;e font-style: italic;, por exemplo, iriam ser aplicadas no bloco inteiro e esse não é o resultado desejado.

Veja:

Dessa forma, o mais indicado foi separar os pontos e estilizá-los individualmente.

Espero ter ajudado, em caso de dúvidas fique a vontade para perguntar. Bons estudos!

Obrigada, Beatriz e Giovanna, eu não havia me atentado para o fato de que o "p" muda todo o parágrafo, porém, se apenas o "strong" e o "em" ficassem no mesmo bloco, isso não afetaria a aparência da página, a menos que não seja uma boa prática. O que vocês acham?

Opa, Tatiana.

Caso o código estivesse assim:

.principal strong, .principal em {
    font-weight: bold;
    font-style: italic;
}

Os pontos que estão em negrito também estarão em itálico, paralelamente. Caso seja o resultado que você deseja, tudo bem. Veja como ficará: Note que as duas propriedades estão sendo aplicadas tanto na "Barbearia Alura" quanto no "Nossa missão".

Entretanto, no modelo da aula o resultado esperado é que a "Barbearia alura" fique somente em negrito e o "Nossa missão" fique uma parte só em itálico e a outra parte em negrito e itálico. Assim: Para ter esse resultado, há a necessidade de separar o código:

.principal strong{
    font-weight: bold;
}

.principal em {
    font-style: italic;
}

Espero ter ajudado, qualquer dúvida só falar :)