[Dúvida] HTML/CSS - Atividade "Trabalhando com listas"

ola, se entendi direito o professor aplicou uma mesma classe em vário < li> e usou essa classe para poder aplicar um estilo comum em todas.

e sua pergunta é "por que não aplicar os estilos direto na tag li, é isso?

usando as classes nos conseguimos delimitar exatamente quais elementos serap alterados. se fosse utilizada a TAG esses estilos seriam aplicados em TODAS as tag < li> existentes no projeto o que trás risco de serem aplicados onde não queremos, principalmente em aplicações/sites muito grandes.

sugiro pesquisar também sobre o padrao de nomenclatura chamado BEM.

é bem interessante e ajuda bastante na organização do projeto.

Então Noberto, no caso ele fez mais ou menos isso: ul li class="itens">Conteudo1/li li class="itens">Conteudo2/li li class="itens">Conteudo3/li li class="itens">Conteudo4/li /ul

E aplicou a mesma propriedades a todas, sendo que daria pra fazer o mesmo mudando a tag pai, no caso ul.

Mas acho que o intuito nisso era apenas mostrar que era possivel repetir a mesma class.

usando seu exemplo, se ele usar a tag "ul" e aplicar os styles, caso o projeto tenha outras ul em outras partes, elas também serão afetadas.

Nos cursos que já fiz eu entendi que é preferível você criar as classes/id para facilitar a leitura e manutenção do código e que o padrão BEM é o mais utilizado.

exemplo 1: usando a classe fica mais fácil de entender o que se está alterando

ul { color: red; }

.lista__clientes{ color: red; }

exemplo2 : usando o parent (ul) para estilizar os childs(li) usando tags e usando classes. com classes fica mais fácil rastrear o processo e controlar o que se está alterando

ul > li { color: red; }

.lista__clientes .lista__clientes-item{ color: red: }

complementando: existem propriedades específicas para parent TAG, outras para Child TAG e outras que são comuns.

se ele colocar somente uma classe na tag UL e lá colocar os estilos, depende do que for implementado não vai funcionar pq não passará do parent para o Child.

exemplo disso são as propriedades de flexbox que tem atributo específico para cada um como citado acima.

Olá!

Por se tratar do primeiro módulo de uma trilha de cursos, acredito que nesse momento a ideia é dar uma visão de como as coisas funcionam em um contexto geral.

Seu raciocínio está correto, a proposta era apresentar que com as classes podemos reaproveitar uma estilização para outros elementos.

Também é possivel que para elementos filhos, a estilização não se aplique ao elemento pai e visse versa.

Exemplo:

Quando você cria uma lista não ordenada (por exemplo) por padrão cada item da sua lista fica com o ícone de uma bolinha com fundo preenchido na cor preta. Se por ventura você optar por trazer uma imagem no lugar desse preenchimento padrão, você precisaria estilizar o elemento pai, que nesse caso seria a sua tag ul ao invés da suas tags li que é onde é representado essa bolinha que mencionei.

ul { list-style-image: url("sua-imagem.jpg"); }

Mesmo que o ícone seja exibido em cada item da sua lista, perceba que ao invés de estilizar o elemento que representa sua lista, temos que estilizar o elemento pai.

Até a próxima