BEM: A Convenção CSS Para Um Front End Muito Melhor

Saiba tudo sobre BEM, a metodologia CSS para nomes que é usada no mundo inteiro para deixar seu código mais profissional.
Bloco, Elemento, Modificador. Se você já ouviu falar de BEM em CSS, com certeza já esbarrou com esses termos por aí.
BEM é uma convenção de nomes -- às vezes chamado de Metodologia CSS ou mesmo Arquitetura CSS (embora imprecisamente) -- usada no mundo inteiro. Por ser muito simples e muito eficiente, ganhou os corações de devs de front end.
Através de seus padrões de nomes simplíssimos e que trazem enormes vantagens aos projetos que os utilizam, já há muito tempo BEM é usado em projetos Web. E a tendência é que seja ainda mais.
Então, se você ainda não sabe o que é BEM, como usar BEM, as melhores dicas e macetes e muito mais, assista a nosso vídeo tutorial para conhecer a metodologia e saber tudo sobre BEM.
Depois de ver esse vídeo, assista também à live que fizemos com tira-dúvidas sobre BEM: • Tira-Dúvidas BEM: Escl...
Acredite: seu código vai ficar BEM melhor! ;)
💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo
/ discord
✏️ BEM: guia definitivo do padrão CSS mais famoso
desenvolviment...
➡️ Basic Front Boilerplate (BFB)
• Basic Front Boilerplat...
🌐 Site oficial BEM
getbem.com/
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolviment...

[@dpwoficial]

⭐ Interessado por convenções, nomenclatura, boas práticas e arquitetura CSS? mailchi.mp/e40fa97b13dd/cssasc-t1 ⭐ Download GRÁTIS do e-book "Os 3 Conceitos Fundamentais de CSS" mailchi.mp/500e81011405/3-conceitos-css

[@diegoi7]

Estou começando a aprender sobre desenvolvimento Web, mas sei a importância de ter um código bem escrito, por isso já estou aqui procurando sobre o que é BEM pra desde já começar usar em meus exercícios rsrs

[@dpwoficial]

Vai começar com o pé direito.

[@jamaunascimento]

Te juro que não entendi muito bem "Metodologia BEM" no curso que estou fazendo, mas com sua didática ficou muito mais inteligível. Então é certeza que se eu não entender alguma coisa de CSS bastar vir no seu canal que vou aprender na integra. Muito obrigado! 🙂

[@dpwoficial]

Jamau, muito obrigado MESMO por seu comentário. Fico satisfeito ao ler mensagens assim. :) Também temos um curso que aborda BEM e diversas outras metodologias e boas práticas de CSS. Vamos abrir uma nova turma em breve, se estiver interessado, só cadastrar seu e-mail para ser avisado: www.cssalemdosensocomum.com.br/

[@lucasbertoldo5062]

Já tinha visto outros videos, mas o teu foi o melhor por esclarecer a questão da flexibilidade da metodologia. Ganhou um escrito, irmão!

[@dpwoficial]

Muito obrigado, Lucas! Com certeza não vai se arrepender da inscrição. ;)

[@chrystianramos1123]

Prossiga com os vídeos sobre BEM, gosto bastante da sua didática e dos seus vídeos. Top! ... Ahh... Faz sobre o ITCSS com o BEM se é que é possível.

[@dpwoficial]

Vlw, Chrystian! ITCSS é um tema muito legal, também. Com certeza vamos abordar em algum momento.

[@BrunoOdeniel]

To aprendendo desenvolvimento Web e tava precisando desse vídeo. Toooop demais

[@dpwoficial]

vlwww

[@marlinho206]

aprender a visualizar os blocks na imagem antes de codar, é bem interessante. Nos ajuda a aninhar pais e filho, ou divs dentro de divs. Faz sim esse conteúdo, vai me esclarecer muito. Parabéns pelo belíssimo trabalho! Tem nos edificado muito.

[@dpwoficial]

Já está feito, Marlon. :) kzbin.info/www/bejne/l4bIXoyOiq-Jnc0

[@eddev13]

Até que enfim uma explicação decente que me fez entender como utilizar o BEM ... super obrigado :)

[@dpwoficial]

Que bom que o vídeo ajudou BEM.

[@luistawloong865]

Ah cara, sorte eu dei de encontrar esse canal. Primeiro que eu ativei o sino. Obrigado pelo seu trabalho, dpw. Estou aprendendo bastante.

[@dpwoficial]

o ho ho! Muito obrigado, man! Se quiser dar aquela força extra indicando o canal nos seus grupos e redes sociais, aí te agradeço por demais.

[@vitonilcius]

Muito bom o vídeo. Foi o vídeo que mais deixou claro o assunto

[@dpwoficial]

Que bom, Vinícius. O CSS vai para outro nível com BEM. Aliás, abordamos com mais detalhes em nosso curso: www.cssalemdosensocomum.com.br/

[@salvimateus]

Depois que aprendi name space, BEM e SMACCS (no seus cursos), me da uma p*ta aflição ver um tutorial que vão colocando nomes aleatórios em classes hahahahaha

[@dpwoficial]

hahaha, uma vez que você vê as boas práticas, é impossível "desver". =P

[@luispaulocavalcante1459]

Que curso você se refere? Sou novo no canal.

[@dpwoficial]

Procura por "CSS: um passo adiante".

[@gleisonsubzeroKZ]

@@dpwoficial ola não estou encontrado seu curso na udemy, foi removido?

[@dpwoficial]

@@gleisonsubzeroKZ Sim. Ele não consta mais no catálogo da Udemy; desculpe.

[@salvimateus]

entrei, dei like, depois eu volto pra assistir

[@dpwoficial]

hahaha, quando voltar, dá outro like! ;)

[@kevinl.a2003]

Rapaz, achei interessante, vou aderir 😅

[@dpwoficial]

Vale a pena.

[@evandromottaz]

Muito bem explicado, gostei muito da metodologia e com certeza aplicarei em meus projetos. Muito obrigado por compartilhar conhecimento de qualidade!

[@dpwoficial]

Eu que agradeço pelas palavras. :)

[@manzelo9855]

Cara, excelente conteúdo, muito obrigado pela aula.

[@dpwoficial]

Imagina. Tamos aê.

[@romuloalves9349]

Desde que conheci eu uso essa metodologia bem no meu sass.Acho que tem que ter um bom senso e pensar no bloco como um todo desse jeito você usará bem menos classes 👏.

[@dpwoficial]

E faz muito BEM de usar! ;) Não é a toa que ela é uma das metodologias de CSS mais usadas no mundo.

[@alexandreandrade5172]

Obrigado. Muito boa sua explicação do tema.

[@dpwoficial]

Disponha!

[@adryanmendes8646]

Excelente vídeo, estou estudando a apostila Caelum da Alura e me deparei com o conteúdo sobre BEMCSS. Seu vídeo foi muito esclarecedor, obrigado!

[@dpwoficial]

Bom saber, Adryan. Abs

[@andersonnascimento9864]

Vídeo BEM informativo.

[@dpwoficial]

🙃

[@salvimateus]

uma coisa que melhorou muito meus projetos: antes eu tinha medo de renomear uma classe e ela estiver sendo usada em outra parte do projeto, não sabia se ela estava sendo usada por algum js, etc Hoje, como crio os layouts baseados em componentes, sei que posso renomear, pois aquela classe só está sendo usada naquele componente. E se não tiver o namespace "js", também sei que não vai bugar nenhum script

[@dpwoficial]

Esse namespace js- salva vidas, cara... O cara que inventou isso merece um prêmio!

[@nderXP]

achei que era BEM de Bonito, Elegante e Majestoso

[@dpwoficial]

haha Pode ser também! :)

[@HerlonCosta]

Que explicação sensacional, sem palavras!

[@dpwoficial]

Muito obrigado!

[@Paulo-cf4mh]

Parabéns pelo vídeo, não conhecia, achei muito interessante , vou começar a usar.

[@dpwoficial]

Obrigado, Paulo. Faz BEM em começar a usar. Com certeza vai ajudar a melhorar seu código. :)

[@cardoso0_]

BEM + Sass Melhor combinação

[@dpwoficial]

De acordo.

[@heltoncunha7264]

muito bem explicado! mais um inscrito!

[@dpwoficial]

Opa, aí sim, Helton! o/

[@lorenapn]

Faz o vídeo de análise!! Eu vim justamente procurar vídeo disso, mas ainda não achei nenhum :(

[@dpwoficial]

Que análise?

[@lorenapn]

No 1:30 +/- vc comenta de fazer análise de layouts (um vídeo só sobre isso). Sei que no fim do vídeo vc fez uma análise, mas como inciante em web, ainda me perco em como nomear de forma eficiente. Seria legal fazer um vídeo: be-a-bá do BEM (pegar alguns layouts de sites e sugerir como nomear os elementos). Não precisaria nem escrever código, uma escrita a mão em cima do layout já ajudaria muito, pra fazer uns 3 diferentes como prática).

[@dpwoficial]

@@lorenapn Ahh, legal. Boa ideia. Vou colocar na lista aqui. 👍

[@alexalannunes]

Q vídeoooo Massaaaa hehe

[@dpwoficial]

Vídeo BEM massa. 🙃

[@santoserick9]

Voltei a usar BEM por conta desse canal TOP!!! Esperando vídeo sobre greensock

[@dpwoficial]

Aposto que seu código ficou BEM melhor! xD Olha... Greensock é um bom tema, mesmo! ;)

[@danielzebinilourenco7730]

Sempre busquei deixar o HTML o mais limpo possível e o BEM é terrível nesse sentido, acabei optando por usar o RSCSS nos meus projetos, mas entendo que depende do time chegar a uma definição pra que todos entendam e façam da mesma forma.

[@dpwoficial]

Eu também acho rscss legal, concordo com muitas coisas dele; gosto especialmente da sintaxe de Variantes (que eu acho que BEM deveria se inspirar, aliás). O que você disse está certíssimo: depende do time chegar a uma definição. Mas uma coisa que conta é: adoção da comunidade. No mundo real, qual a probabilidade maior ao encontrar/entrar em um projeto, BEM ou rscss?

[@danielzebinilourenco7730]

@@dpwoficial sim, igualmente para quem usa stylus ou less sendo que a comunidade em sua maioria usa sass... complicado, o jeito é tentar se inteirar da forma mais ampla possível pra se adaptar a qualquer time. Abraço e parabéns pelo conteúdo!

[@dpwoficial]

Exatamente isso. Muito obrigado pela participação, Daniel. Apareça. :)

[@hevityaus631]

Devagar e bem explicado, vlw pelo vídeo cara.

[@dpwoficial]

Eu que agradeço pelo comment. :)

[@brianronin505]

Faça um bem pra você mesmo, use bem!

[@dpwoficial]

BEM falado. :)

[@laissa1207]

Obrigada!!!

[@dpwoficial]

Disponha!

[@kelvinalisson6982]

Parabens pelo vídeo

[@dpwoficial]

Vlw, Kelvin!

[@renatowsaroca]

Masaaaassa!!!!

[@dpwoficial]

o/

[@fnscluis]

Show. Quero me aprofundar nessas metodologias.

[@dpwoficial]

Boa, Luís. Vai ver que isso vai te ajudar muito e seu código vai ficar BEM melhor. :)

[@igorxp]

Muito bom! parabens!

[@dpwoficial]

vlw, Igor!

[@eduardovieira1766]

Ficou muito top o vídeo!

[@dpwoficial]

Muito obrigado, Eduardo! o/

[@anarktv8098]

Depois de muito tempo parado, voltei a estudar CSS, e obviamente a metodologia BEM. A minha duvida fica em outro quesito. Por que tantas pessoas utilizam a font-size rem se a recomendação do W3C é utilizar o em?

[@dpwoficial]

Onde consta que a recomendação do W3C é utilizar "em"?

[@anarktv8098]

@@dpwoficial No w3c em font-size diz que em font-size estático usa-se px, e variavel em. O W3c não cita o rem como referencia. Pelo menos eu não achei isso. No canal curso em video, que é uma referencia em tecnologia, também é citada esta informação. Posso mandar o link se precisar. Acho um pouco estranho tanta gente utilizar o rem.

[@dpwoficial]

@@anarktv8098 Opa, pode enviar o link?

[@asamadoasa6517]

melhor canal

[@dpwoficial]

haha Obrigado pela consideração. Ainda chegamos lá. o/

[@vshstat]

Muito bom

[@dpwoficial]

vlw

[@dvalmont07]

Muito legal o vídeo! Tenho uma dúvida: essa convenção tem algum conflito com a estrutura SASS, levando em conta que esse ultimo tem um padrão hierárquico? Obrigado!

[@dpwoficial]

Zero conflitos. Pelo contrário: usando parent selector de Sass para gerar BEM é bastante limpo e eficiente. :)

[@arozendojr]

Já viu o sonarqube, que é possível configurar o ide pegando as rules do servidor, análise código durante a escrita ? Só que não encontrei para css aplicando o BEM😅

[@dpwoficial]

Nunca nem ouvi falar. '-'

[@FelipeSMdaRosa]

Foi BEM explicado kkkkkkkkkk

[@dpwoficial]

#tudumtss

[@Energia2646]

ok obg

[@dpwoficial]

De nada.

[@bardX21]

Olá me desculpa fazer está pergunta mais como poço saber se um item e elemento ou bloco exemplo eu tenho uma div container dentro dela tem um li e dentro do li tem um a com href

[@dpwoficial]

Não entendi direito. Qual seria a estrutura?

[@Souumzumbi]

No exemplo dado aos 13:30, seria errado utilizar no button a classe card__btn?

[@dpwoficial]

Se o botão fizesse parte, exclusivamente, do card, não; no exemplo, o botão era um outro componente.

[@Souumzumbi]

@@dpwoficial obrigado pela resposta, acho que entendi. É que como o botão estava dentro do card, eu imaginava que ele também precisaria receber a classe card. Posso ter entendido errado, mas eu li em algum lugar que um elemento pode receber classes como block e também como elemento, mas não sei se é errado fazer isso, por exemplo: "card__posts posts"

[@dpwoficial]

@@Souumzumbi Não há problema algum em usar um componente dentro de outro, pelo contrário, é até algo bastante comum de ser feito. É chamado de composição de componentes. Componentes "menores" sendo usados juntos para fazer um componente mais complexo.

[@fabinho1143]

Muito legal, BEM é a metodologia que mais me identifiquei. Mas tipo, eu uso o fw Bulma pra quase tudo, mas o Bulma não usa o BEM. A minha dúvida é se é uma boa prática usar o BEM nesse caso?

[@dpwoficial]

Vai depender do que for convencionado, mas nada impede de serem usados em conjunto. Inclusive, as classes BEM servem muito bem para diferenciar o que é código específico do projeto e o que é do framework.

[@numseidizer]

Topppp. Like. Ei, sei que não é o foco do canal, mas se não puder fazer um video sobre isso, me tira essa dúvida no comentário pf. Eu queria saber como seria feito a autenticação do usuário na hora de acessar as rotas privadas do frontend. Tipo, eu vi um post em um blog que ele só verifica se o localStorage o token é diferente de nulo. Mas isso é uma falha grave, pois se setar qualquer token, poderá ser visto o conteúdo daquela rota (mesmo que não possa editar ou mandar dados, já que pra isso, vai dar token inválido no backend)

[@dpwoficial]

Oi, Obito. Obrigado por comentar. Realmente, este é um tópico bem amplo. Mas, adiantando, existem diversas maneiras de se fazer isso, a depender da tecnologia de back que você está usando. Acredito que este código que você está comentando vou somente um exemplo, pois é realmente bem fraquinho em cenários do mundo real.

[@renanmorais3038]

Bem interessante! No caso dos elementos do bootstrap, você "ignora" as classes dele e cria novas para estilização?

[@renanmorais3038]

Por exemplo utilizo navbar, grid, spinners, display, flex, spacing, sizing e text do bootstrap e quero aplicar essa metodologia

[@dpwoficial]

Pode usar junto, sem problema. Dá uma olhada na nossa live de tira-dúvidas sobre BEM que abordamos isso: kzbin.info/www/bejne/iYW4qmR_Z9aEoKc

[@tarciodesouza6649]

Meu xará kkkkk

[@dpwoficial]

Tá de zoas! haha o/

[@deividyhertz3621]

Por exemplo em uma view de listagem de posts estaria correto utilizar blog__header e blog__body? E para o post ( componente vue separado) post__title, post__content, etc

[@dpwoficial]

"blog__header" e "blog__body" seriam Elementos (filhos) de "blog". Não sei se é o melhor caminho para uma listagem de posts -- dependendo, pode ser; é que não conheço a estrutura mesmo. Quanto a "post__title", "post__content" etc., tá legal sim.

[@thiagomoraes791]

a metodologia BEM é mais pra nome de class? mas tp seria uma boa ideia usar bem e a cascata default do css ?

[@dpwoficial]

Sim, é mais para nome de classes. A Cascata de CSS a gente sempre usa, querendo ou não. =P

[@potamo1288]

ou você poderia fazer um video usando pug, aquele template html, vlw video top, vou tentar aplicar o BEM no sass

[@dpwoficial]

Oi, Luis. Tudo bom? Pode usar no Sass que você vai ver como é tranquilo. Dá uma olhada na desc do vídeo o artigo no blog que mostra como usar no Sass. Você vai gostar. Ah, e anotada a ideia de abordarmos o Pug. :)

[@potamo1288]

@@dpwoficial sim, eu to aprendendo sass ainda, to lendo a documentação, ele facilita tudo msm, inclusive so comecei a usar por causa do seu video sobre

[@dpwoficial]

Olha só! Legal saber. Você vai ver que vai te ajudar MUITO.

[@Megatorial]

Tenho uma dúvida, é correto usar os elementos no BEM? Tipo: .about img .about__item img Ou correto seria: .about .about__image .about__item .about__image

[@dpwoficial]

Preferencialmente, a segunda opção. Mesmo fora de BEM, não é muito bom usar seletor de elementos.

[@Megatorial]

@@dpwoficial obg

[@dpwoficial]

@@Megatorial Não há por onde.

[@salvimateus]

Em que situação é útil o número da linha do seu vscode começar a contagem da linha atual?

[@dpwoficial]

haha, para quem usa vim (ou emulador de vim) isso é útil pra caramba. ;)

[@salvimateus]

@@dpwoficial pq? haha

[@dpwoficial]

Basicamente, no vim (ou emuladores) a ideia é usar o menos possível o mouse; fazer tudo só com o teclado. Aí pode ver que ele começa da linha atual a contagem para cima e para baixo, né? Daí se eu quiser mover o cursor X linhas para cima, uso `X+k`; se quiser mover Y linhas para baixo, `Y+j`. É meio doido no começo, mas depois que acostuma, não tem coisa melhor. xD

[@salvimateus]

@@dpwoficial hummmmmmmm que trampo haha

[@dpwoficial]

😜

[@guilherm3fx]

teria algum problema em vez de usar dois __ ou dois --, daria pra usar apenas um? eu normalmente faço assim parece até com o bootstrap estaria errado?

[@dpwoficial]

Se for para seguir BEM, estaria errado sim. Teria que ser nav__menu, nav__item etc.

[@emanueldsc]

Pra usar esse padrão dentro do sass? Como ficaria? .c-list { & { list-style: none; maron: 0; padding: 0; } &__link { color: $colorBlue; text-decorator: none; } }

[@dpwoficial]

Não precisa do `&` puro para aquelas definições, coloca direto; para Elementos e Modificadores, aí sim com com `&__el` e `&---mod`. Dá uma olhada na descrição do vídeo que tem link para nosso artigo com exemplos de BEM com Sass. 👍

[@ellyfbernardo]

No BEM, a gente só usa o modificador para mapear a estilização que a gente quer dar no CSS? O que eu quero dizer é que, se apenas tiver o modificador, nada acontece. É uma marcação, certo?

[@dpwoficial]

Não entendi direito sua pergunta... Mas um Modificador, como indica o próprio nome, modifica um Bloco ou Elemento, alterando algumas de suas características. Por exemplo, você fez um componente de botão, aí precisa que, em alguns casos, ele seja de um tamanho diferente dos demais, aí você cria um Modificador.

[@chrystianramos1123]

Opa! Primeiro a curtir e a comentar!

[@dpwoficial]

haha, vlw, Chrystian! ;)

[@pedroreis8541]

Eu consigo conciliar essa metodologia BEM com bootstrap, teria um exemplo de código?

[@dpwoficial]

Oi, Pedro. Tem como, sim. Dá uma olhada aqui: en.bem.info/forum/52/

[@SamuelNasta]

Só imagino a cara do povo do HTML q teve o trabalho de criar a semântica do elemento pra galera ficar colocando class="btn" ¬¬ Qual a necessidade, meu povo? PORQUE gzuis?

[@dpwoficial]

¯\_(ツ)_/¯

[@willsandres]

como ficaria esse conceito em um menu? contendo... (.menu ul li a) pra mim sinto dificuldades de aplicar quando se tem varios elementos desse jeito. poderia me explicar de uma melhor forma?

[@dpwoficial]

Em 13:52 mostramos um exemplo de uma lista com BEM que é parecido com o que poderia ser feito em um menu (simples). A ideia é usar nomes que sejam descritivos e permitam identificar cada elemento dentro da estrutura (sem, necessariamente, repetir toda a hierarquia HTML).

[@alexandrezapponi8411]

Vc prefere dois monitores a um super wide ??

[@dpwoficial]

Sim.

[@Blaizy2011]

Opa, uma dúvida, eu costumo utilizar o bem, como nesse modelo "btn btn__size --large btn__shape --round", estaria incoerente ou poderia ser aplicado dessa forma também?

[@dpwoficial]

Tá errado. Teria que ser "btn btn--large btn--rounded".

[@Matheus.Stopinski]

Com o conhecimento que vc tem quanto ganha por mes? pq sabe muito.

[@dpwoficial]

Obrigado, Matheus!

[@LennonSantosBR]

BEM até que é legal, mas ainda bem que inventaram tailwind hehe

[@dpwoficial]

São coisas completamente diferentes. Incomparáveis.

[@LennonSantosBR]

@@dpwoficial discordo. Eu entendo que são duas abordagens para escrever e manter css.

[@dpwoficial]

@@LennonSantosBR Site BEM: "BEM is a component-based approach to web development". Site TW: "A utility-first CSS framework".

[@LennonSantosBR]

@@dpwoficial banana e maçã são diferentes, mas são frutas.

[@raidertm1653]

Meu codigo CSS tá uma bagunça sksksksks

[@dpwoficial]

www.cssalemdosensocomum.com.br/

[@cabralfilho.]

eu aqui em 2022

[@dpwoficial]

OK...

[@renatolins9812]

Desculpem a sinceridade, mas considero o método absurdamente improdutivo, desnecessário e... bom, deixa a manutenção do sistema centenas de vezes pior, engessa tudo, um caos em sistemas grandes, com grandes equipes, um tiro que sai pela culatra. Vão de Styled components, que já evita name clashes, permitem compound components e lógica na estilização, e pronto galera - muito mais flexível, fácil e poderoso... lembrem: keep it simple!!

[@dpwoficial]

Todos os pontos levantados foram devidamente refutados no vídeo. Aqui tem mais infos e exemplos: kzbin.info/www/bejne/iYW4qmR_Z9aEoKc Vlwww

[@renatolins9812]

@@dpwoficial Se puder conferir: kzbin.info/www/bejne/bna4pIWZm96YlZo E: kzbin.info/www/bejne/h5XJm4qImJmsiaM Bom... to avisando mais por camaradagem mesmo, pro pessoal não se iludir com BEM. Mas tranquilo, esse tipo de discussão sempre acontece, opiniões divergen.