BEM: Organizando seu códido CSS 😉

[@vetorial_data_custom]

Muito bom. Sou dev backend e esse pattern facilita muito o desenvolvimento.

[@fabi_mms]

Excelente explicação Washington. Obrigada! O vídeo já está salvo

[@berserkercimerio7946]

Muito bem explicado!

[@Thom.Zille.]

Perfeito! Ótimo vídeo.

[@Alan4F50]

Você explica muito bem, man! Parabéns

[@wagnerviviani6158]

Parabéns pela sua didática. Obrigado pelos vídeos, vou repassar !

[@danilosantos9252]

Digamos que a estrutura do codigo fosse essa, e eu quero aplica um modificador para formata todos titulos como que eu faria? sendo que o prefixo são diferente um é services e o outro products, não poderia usar o modificador services__title--blue para todos os titulos, afinal ele esta com prefixo do services, ai iria ficar assim usando ele no title do products " products__tile services__title--blue" se eu não fizer assim entao irei repetir codigos, tipo mesma formatação do css que usei no services__title--blue terei que usar no products__title--blue gerando uma codigos repetidos. Então como resolvo isso? Serviços Oferecemos a nossos cliente assistência técnica multimarcas, especializada em eletrodomésticos da linha branca. Produtos vendidos na Loja Alguns dos nossos acessorios vendidos na loja.

[@WashingtonDeveloper]

Fala Danilo tudo bem? Da uma olhada nesse vídeo kzbin.info/www/bejne/l57JmYidgcl8p7s

[@danilosantos9252]

@@WashingtonDeveloper infelizmente não me ajudou muito, essa metodologia esta sendo complicada de eu entender, mas obrigado pela atenção. =)

[@WashingtonDeveloper]

Vamos la Danilo, a intenção de vc usar o BEM, e melhorar seu código e isolar mais seu "componente" e fazer reuso. A sua section esta com um ID, vc poderia mudar para classe. Então vc poderia fazer assim: Serviços Oferecemos ... Produtos vendidos na Loja Alguns dos nossos acessorios ... Aqui eu quiz deixar meu bloco mais genérico(app-header), porque quero fazer reuso dele em outros lugares da minha aplicação. Não me apeguei onde vou utiliza-lo por exemplo: Serviços ou Produtos Viu? consegui fazer reuso do código css utilizando o BEM. Espero que tenha te ajudado 👍

[@danilosantos9252]

@@WashingtonDeveloper Obrigado me ajudou, entendi perfeitamente. Muito obrigado

[@danilosantos9252]

@@WashingtonDeveloper muito obrigado, desculpe incomodar. é algo simples mas acabo tendo dificuldade para entender algumas coisas. Percebi que tenho dificuldade com nomeção de class, sabe me informar se tem algum video ou algo parecido que venha ter algum padrão, note que voce criou uma class generica facil, rs. E eu passei um bom tempo e não conseguir, acabo vendo que essa dificuldade de nomeção das classes esta atrapalhando meu entendimento com a metodologia bem.

[@vlogiotcomti]

Cara muito bom

[@marcospapa704]

Muito bom hein!

[@danilosantos9252]

muito bom o video, é algo facil porem pra mim ainda está confuso. digamos que eu tenha a seguinte estrutura:

[@WashingtonDeveloper]

Olá Danilo tudo bem? que ótima pergunta!. De acordo com a documentação sempre vai existir um elemento, e esse elemento, pode estar dentro de outro elemento; vamos ao exemplo que vc deixou: Viu? o card é um bloco. o card__item1 é um elemento e o card__item2 também é um elemento do card. com isso, aquele que depende do bloco, vai ser um elemento. Lembrando que isso não é o que eu acho mas esta no FAQ da documentação vou deixar para vc dar uma olhada: getbem.com/faq/ Vai estar em ingles: What would be a class name for an element inside another element? block__el1__el2 Espero ter ajudado 👍 Vou gravar um video explicando, fique ligado 🤓

[@danilosantos9252]

@@WashingtonDeveloper Desde já quero agradecer por me responder, mas nesse caso da div card, não tem que colocar o nome da class container já que card está dentro de container? resultando na nomenclatura container_card Obs: esperando pelo video xD

[@WashingtonDeveloper]

@@danilosantos9252 blz?, então o container não precisa ter vinculo com o Card, porque o Card e um bloco e o Container também e. O Bloco pode ter outros blocos dentro deles. esse é o video kzbin.info/www/bejne/l57JmYidgcl8p7s

[@danilosantos9252]

@@WashingtonDeveloper Novamente obrigado pelo feedback. já esta ficando mais claro pra mim, irei ver o video que me sugeriu

[@fiquericoousofratentando]

se não me engano, você tem um canal antigo certo ?

[@WashingtonDeveloper]

Ola tudo bem? Não tenho outro canal.

[@cristianmelo7729]

parece um pouco com tailwind. Faz sentido o que falei?

[@WashingtonDeveloper]

Ola Cristian tudo bem? BEM nos ajuda a organizar nossas classes(ele é uma técnica) tailwind e um framework

[@cristianmelo7729]

@@WashingtonDeveloper Show. Valeu!

[@bl1tz_x]

Estou entrando agora no mundo do front-end, deu para entender claramente com sua explicação, porém, na convenção BEM, não utiliza IDs, apenas classes?

[@WashingtonDeveloper]

Opa tudo bem? de acordo com a documentacão sim. getbem.com/

[@filmesdepoimentos1106]

Parabéns pelo video. Estou começando a programar e me pareceu um pouco assustador o BEM, pois tende a ter classes com nomes grandes; Você acha que seria um problema ter classes com nomes grandes em termos de boas práticas?

[@WashingtonDeveloper]

Ola tudo bem? então na minha opinião, se o padrão que vc esta implementando ajuda sua equipe a evoluir o software com qualidade e uma otima pratica. Não se preocupe se o padrão que vc esta utilizando e grande ou pequeno... mas se for boas praticas vale a pena. Tem o video 2 sobre BEM: ttps://kzbin.info/www/bejne/l57JmYidgcl8p7s Vlw