[Dúvida] Deveríamos criar as classes CSS de todos os itens?

Olá, Bruno!

Na aula/exercício em que você está com dúvida, o instrutor está focando no desenvolvimento da lógica em JavaScript para criar as tarefas, por isso não foi abordada a criação das classes CSS para o SVG, parágrafo e botão.

No entanto, é importante ressaltar que a criação das classes CSS para esses elementos pode ser necessária dependendo do design e da estilização que você deseja aplicar à sua aplicação. Se você pretende estilizar esses elementos de forma diferente dos estilos padrão, pode ser interessante criar as classes correspondentes.

Por exemplo, se você deseja adicionar estilos específicos ao SVG, como alterar a cor de preenchimento do círculo ou a cor do ícone, pode ser útil criar uma classe CSS para o elemento SVG e aplicar os estilos desejados.

Da mesma forma, se você deseja estilizar o parágrafo de forma diferente, como alterar a cor do texto ou o tamanho da fonte, criar uma classe CSS para o parágrafo pode ser útil.

O mesmo vale para o botão e a imagem. Se você deseja adicionar estilos personalizados ao botão, como alterar a cor de fundo ou a cor do texto, criar uma classe CSS para o botão pode ser uma boa prática.

Portanto, a criação das classes CSS para esses elementos não é obrigatória, mas pode ser útil se você quiser personalizar a aparência deles.

Espero ter ajudado e bons estudos!

Se você se refere a adição da classe ao criar o elemento no JavaScript: como o instrutor copiou o código HTML, ele também copiou a classe presente no SVG.

<svg>
   ---> <svg class="app__section-task-icon-status" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="12" fill="#FFF"></circle>
            <path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="#01080E"></path>
        </svg>
 </svg>

Fora isso ele esqueceu de adicionar classes para o p e button.