Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Dúvida sobre a classe da linha 37 e 41

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto AluGames e atividade Obtendo o jogo clicado

por Daniele Fernandes Canelas Bossa
| 16.7k xp | 4 posts

Por que a classe da linha 37 e 41 tem duas classes referente ao CSS? A linha 37 dashboard__item__img dashboard__item__img--rented e a linha 41 dashboard__item__button dashboard__item__button--return

<li class="dashboard__items__item" id="game-3">
                    <div class="dashboard__item__img dashboard__item__img--rented">
                        <img src="img/takenoko.png" alt="Capa jogo Takenoko">
                    </div>
                    <p class="dashboard__item__name">Takenoko</p>
                    <a onclick="alterarStatus(3)" href="#" class="dashboard__item__button dashboard__item__button--return">Devolver</a>
                </li>
2 respostas
por Vinicius de Oliveira Giuliani
| 57.3k xp | 10 posts
Desenvolvedor Full Stack

Olá, Daniele, tudo bem?

No design web, é muito comum elementos de HTML terem mais de 1 classe. Neste caso, o HTML utiliza o formato de classes conhecido como BEM, que são constituídos de blocos, elementos, e modificadores.

Nesse formato, todo elemento é representado por uma classe que contém um bloco e um ou mais elementos, com a qual é definido o estilo padrão desse elemento, e quando algum efeito necessita ser aplicado nesse elemento, é adicionado uma classe com o mesmo nome seguida de um modificador.

Na linha 37, o bloco é dashboard; o elemento div está dentro de um elemento item; e o elemento div em si é o container de uma img. Assim sendo, esse elemento vai sempre possuir a classe dashboard__item__img. Se o jogo estiver alugado, ele também deverá conter um modificador rented, e dessa forma é adicionada uma segunda classe dashboard__item__img--rented.

Algo semelhante ocorre na linha 41, mas nesse caso o elemento é um button, e o modificador return determina se é possível devolver o jogo.

solução!
por Daniele Fernandes Canelas Bossa
| 16.7k xp | 4 posts

Obrigada pela explicação. Estou fazendo o curso de Html e Css aqui, mas ainda não estudei isso. Vou procurar me aprofundar no assunto. Grata.