DEV Community

Ana Luisa Santos
Ana Luisa Santos

Posted on

CSS BEM - Saiba tudo sobre essa metodologia!

Image description

ūü§Ē Voc√™ em algum momento de sua carreira deve ter ouvido falar sobre a metodologia BEM em CSS, e caso n√£o nunca tenha ouvido falar, ou muito menos sabia que ela existe, fique neste artigo at√© o final para entender a real import√Ęncia da sua utiliza√ß√£o.

O que é BEM?

BEM é uma abreviação para Block, Element and Modifier, que em português significa Bloco, Elemento e Modificador. Criada em volta de 2005 por um buscador russo bem famoso chamada Yandex, com o objetivo de padronizar o código em vários em vários projetos, te auxiliando a criar códigos reutilizáveis e sustentáveis por meio da nomeação de classes. Fazendo com que você tenta total autonomia na na escrita e manutenção de qualquer tipo de projeto.

Qual o significado da abreviação?

Cada bloco desta metodologia s√£o divididos em 3 pilares importantes, que s√£o:

BLOCO
√Č um componente independente de uma aplica√ß√£o, que tem o seu pr√≥prio significado. O Bloco √© um container, que cont√©m elementos de marca√ß√£o HTML como seu conte√ļdo, ou at√© mesmo, outros blocos iguais.

Um bom exemplo de bloco séria

<div class="menu">
   <h1>Conte√ļdo do elemento...</h1>
</div>

Enter fullscreen mode Exit fullscreen mode

Elemento

O elemento filho faz parte de um bloco, sendo semanticamente ligado ao elemento pai, não podendo ser utilizado fora desse bloco, como estão sempre atrelados a esse bloco, geralmente o nome do elemento é separado, contendo o nome do bloco, 2 underlinhas (__) e nome do elemento.

.menu{} /*Bloco*/ 

.menu__link{} /*Elemento*/

Enter fullscreen mode Exit fullscreen mode

Modificador

Como o próprio nome diz, ele modifica os comportamentos, estados e aparência dos blocos e/ou elementos.

.menu{} /* Bloco */

.menu__link{} /* Elemento */

.menu_ChangeColor{} /* Modificador */ 
Enter fullscreen mode Exit fullscreen mode

Qual é a ideia por trás e quais são as suas boas práticas

A ideia por tr√°s da utiliza√ß√£o da estrutura da metodologia BEM √© fazer com que as informa√ß√Ķes sejam mais f√°ceis de entender tanto para voc√™, quanto para outros desenvolvedores terem uma maior facilidade de entender o seu c√≥digo.

<div class="card">
    <div class="card__header">
        <h2>Título do Card</h2>
    </div>
    <div class="card__boxRed">
        <img src="" alt="" class="card__img">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
    </div>
    <div class="card__boxBlue">
        <img src="" alt="" class="card__img">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
    </div>
    <div class="card__boxGreen">
        <img src="" alt="" class="card__img">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda, alias ipsum. Qui eius error doloribus earum est explicabo ullam iure quo, consequatur nemo magnam voluptatem doloremque distinctio! Sit, obcaecati quidem?</p>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Principais Vantagens

  • Reutiliza√ß√£o de C√≥digo
  • Ajuda na nomea√ß√£o do c√≥digo CSS sem esfor√ßo e complica√ß√£o
  • Melhor Compreens√£o do c√≥digo
  • Desenvolvimento mais r√°pido com resultados duradouros
  • A arquitetura garante a longevidade e a sustentabilidade para o desenvolvimento
  • Menos problemas com o avan√ßo do c√≥digo HTML
  • Facilita na manuten√ß√£o do c√≥digo
  • Cria uma estrutura escal√°vel

Top comments (2)

Collapse
 
camiligomes profile image
‚Ą≠ • Edited

Ana, te encontrei aqui após exatos 1 ano de Post (16-julho) e fiz conta aqui só pra te agradecer pela didática ótima kkkkkkkk só consegui entender contigo, tamo junto!!

Collapse
 
analuisadev profile image
Ana Luisa Santos

Olá! Fiquei muito feliz em saber que minha didatica ajudou você, muito obrigada pela lembrança e feedback, fizeste o meu dia! :D