BEM: Organizando seu códido CSS 😉

Подписаться 4 тыс.

Просмотров 2,8 тыс.

50% 1

BEM é uma metodologia, um padrão de nomenclatura que utilizamos para manter o nosso projeto simples e organizado.
E nesse video vamos ver como podemos utilizá-lo em nossos projetos
#bem #css #cleancode
📷 Repositorio: github.com/washingtondevelope...
📺 Documentação: getbem.com/
🏷 Symbols: www.toptal.com/designers/html...
Compartilhe: • BEM: Organizando seu c...

Наука

Опубликовано:

6 фев 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 29

@gawanferreira4234 4 месяца назад

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

@Alan4F50 2 года назад

Você explica muito bem, man! Parabéns

@wagnerviviani6158 3 года назад

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

@berserkercimerio7946 2 года назад

Muito bem explicado!

@marcospapa704 3 года назад

Muito bom hein!

@Thom.Zille. 2 года назад

Perfeito! Ótimo vídeo.

@vlogiotcomti 3 года назад

Cara muito bom

@filmesdepoimentos1106 2 года назад

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 2 года назад

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://ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-amfhUgLdIqY.html Vlw

@danilosantos9252 2 года назад

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

@WashingtonDeveloper 2 года назад

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 2 года назад

@@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 2 года назад

@@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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-amfhUgLdIqY.html

@danilosantos9252 2 года назад

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

@bl1tz_x 2 года назад

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 2 года назад

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

@danilosantos9252 2 года назад

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 2 года назад

Fala Danilo tudo bem? Da uma olhada nesse vídeo ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-amfhUgLdIqY.html

@danilosantos9252 2 года назад

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

@WashingtonDeveloper 2 года назад

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 2 года назад

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

@danilosantos9252 2 года назад

@@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.