[Dúvida] Bloco ou elemento? | Arquitetura CSS: descomplicando os problemas

1
resposta

por Thaynara Lima da Silva

| 82.5k xp | 59 posts

Estou com dúvida no que seria bloco e no que seria elemento.

No curso o instrutor disse que header, img e nav seria um bloco, mas que o ul é um elemento por ser filho de um bloco (do nav neste caso). Porque então que o img e nav são blocos invés de elementos já que ele é filho do block cabecalho? Por que devemos nomear o nav e a img de logo e menu invés de "cabecalho__logo" e "cabecalho__menu"? E os li links que estão do ul é elemento também?

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

1 resposta

por Fábio Henrique Araújo

| 79.9k xp | 33 posts

Analista de Sistemas

14/09/2023

Olá Thaynara, boa tarde, tudo bem?

Respondendo à sua pergunta, img e nav são elementos sim, a nomenclatura utilizada, muito provavelmente, foi por questão de praticidade e facilidade de enetendimento, porém, pela estrutura da convenção BEM, img e nav teriam ficado:

<header class="cabecalho"> 
    <img class="cabecalho__logo" src="assets/img/logo.jpg" alt="Fruta e Fruto">
    <nav class="cabecalho__menu"> 
        <ul class="menu"> 
            <li class="menu__item"><a class="menu__link" 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>

tomei também a liberdade de colocar onde não tinha, pra te ajudar nos estudos futuros.

Bons estudos!

"A vida é uma coisa frágil, e a única coisa que importa é o que fazemos com ela." - Dr. Beverly Crusher