Duvida sobre a Metodologia BEM.

Boa tarde, meu caro,

Tudo tranquilo?

Sobre a questão da tag ul acredito ser pelo fato de menu__lista estar englobado em menu e ter uma ligação semântica de mesmo sentido, ou seja, não conseguimos imaginar um menu__lista sem a existência de um menu, porém no caso do cabeçalho, é uma classe que referencia uma parte inteira que pode conter vários atributos internos, como menu, imagens, divisões e várias outras tags. Se fizéssemos da maneira que sugeriu cabecalho__menu nós teríamos que seguir esse padrão em todos os filhos e no final ficaria algo extremamente repetitivo.

Em relação a imagem também fiquei com essa dúvida quando fiz o exercício, acho que ela deveria ter sido colocada no CSS, mas acredito que não foi pois no início do curso ele ainda não havia explicado sobre isso e no final não houve uma refatoração do que foi aplicado no início. Não sei se ficou confusa minha explicação kkkk, mas acredito ser isso. bons estudos :)

Boa noite, Ergon,

tudo tranquilo sim e com vc!?

Entendi sim sua resposta e muito obrigado pela explicação, em relação a imagem, no final do curso realmente ele faz a alteração trazendo a ela para o css! Fui ansioso e não esperei até o final kkkk.

Em questão da classificação da classe na pergunta eu coloquei a tag errada, não seria a tag <ul> e sim a tag <nav> que esta com a class="menu", não teria que ser class="cabecalho__menu"? Ou segue a mesma linha de raciocínio que vc explicou?

Boa noite, Francisco,

Tudo show de bola!

Então, decidi dar uma olhada melhor em alguns artigos sobre metodologia BEM (Bloco, Elemento e Modificador) e para entendermos melhor essa parte precisamos entender o que é cada coisa: Bloco, Elemento e Modificador

BLOCO

Em BEM, um Bloco é uma entidade independente, um “bloco de construção” de uma aplicação; uma abstração mais geral, marquei aqui no seu código o que seria os blocos:

<header class="cabecalho"> (BLOCO)
            <img class="logo" alt="Fruta e Fruto" src="./assets/img/logo.jpg">
            <nav class="menu"> (BLOCO)
                <ul class="menu__lista"> (BLOCO)
                    <li class="menu__item"><a class="menu__link ativo" href="#">Início</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Receitas</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Quem somos</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Comunidade</a></li>
                </ul>
            </nav>
 </header>

Bloco é o mais flexível na nomenclatura, significando que você pode atribuir o nome à “entidade” da maneira que quiser — inclusive em conjunto com outras convenções sem ser a BEM (Guarde essa informação pois ela é importante kkk)

ELEMENTO

Forma de Escrita: Nome do Bloco + 2 underlines + nome do Elemento

Um Elemento faz parte de um Bloco; é um elemento-filho. Um Elemento não tem função/significado por si só e está semanticamente vinculado ao seu respectivo Bloco. Agora vou colocar seu código aqui novamente descrevendo o que seriam elementos :

<header class="cabecalho"> (BLOCO)
            <img class="logo" alt="Fruta e Fruto" src="./assets/img/logo.jpg"> (ELEMENTO)
            <nav class="menu"> (BLOCO) - (ELEMENTO)
                <ul class="menu__lista"> (BLOCO) - (ELEMENTO)
                    <li class="menu__item"><a class="menu__link ativo" href="#">Início</a></li> (ELEMENTO)
                    <li class="menu__item"><a class="menu__link" href="#">Receitas</a></li> (ELEMENTO)
                    <li class="menu__item"><a class="menu__link" href="#">Quem somos</a></li> (ELEMENTO)
                    <li class="menu__item"><a class="menu__link" href="#">Comunidade</a></li> (ELEMENTO)
                </ul>
            </nav>
 </header>

MODIFICADOR

Forma de Escrita: nome de um Bloco ou Modificador + 2 hífens + o nome do Modificador

Um Modificador de BEM serve para modificar um Bloco ou um Elemento

Então vamos supor que eu decidisse que no seu class="menu__lista" assim que eu clicasse, todo o bloco desabilitasse, nesse caso eu poderia criar um modificador que eu adicionaria dentro da classe ficando da seguinte forma

<header class="cabecalho"> 
            <img class="logo" alt="Fruta e Fruto" src="./assets/img/logo.jpg">
            <nav class="menu"> 
                <ul class="menu__lista menu__lista--desabilitar"> 
                    <li class="menu__item"><a class="menu__link ativo" href="#">Início</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Receitas</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Quem somos</a></li>
                    <li class="menu__item"><a class="menu__link" href="#">Comunidade</a></li>
                </ul>
            </nav>
 </header>

Essa explicação foi para contextualizar e também corrigir minha resposta anterior kkk

Com isso temos a seguinte questão, sabemos que a tag nav é ao mesmo tempo Bloco e Elemento, na regra do Bloco podemos escrever o que quisermos desde que tenha sentido semântico, mas na regra do elemento não. Com isso, acredito que ele adotou a regra de escrita do Bloco não optando por colocar o class como sendo cabecalho-menu pois a semântica apenas como menu para o exercício em questão faria mais sentido já que não temos outros menus no nosso html, porém se tivéssemos outros menus acredito que ele adotaria a forma de escrita do Elemento e não a do Bloco

Desculpe o textão de explicação kkkkkkk

Mas vi que assim fica mais contextualizado :)

Caso queira ler um pouco mais, tomei como referência esse site aqui : https://desenvolvimentoparaweb.com/css/bem/, vi outros também mas usei esse dai para explicação.

Cara, Ergon que explicação top, muito obrigado por tirar um tempo em me explicar certinho, agora entendi muito bem!!

Uma ótima semana meu amigo!

Opa, igualmente meu amigo, ótima semana e bons estudos sempre!! :)