Тёмный

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

dpw
Подписаться 26 тыс.
Просмотров 24 тыс.
50% 1

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
desenvolvimentoparaweb.com/cs...
➡️ 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: desenvolvimentoparaweb.com/

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

 

31 май 2020

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 162   
@dpwoficial
@dpwoficial 3 года назад
⭐ 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
@BrunoOdeniel
@BrunoOdeniel 2 месяца назад
To aprendendo desenvolvimento Web e tava precisando desse vídeo. Toooop demais
@dpwoficial
@dpwoficial 2 месяца назад
vlwww
@salvimateus
@salvimateus 4 года назад
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
@dpwoficial 4 года назад
hahaha, uma vez que você vê as boas práticas, é impossível "desver". =P
@luispaulocavalcante1459
@luispaulocavalcante1459 4 года назад
Que curso você se refere? Sou novo no canal.
@dpwoficial
@dpwoficial 4 года назад
Procura por "CSS: um passo adiante".
@gleisonsubzeroKZ
@gleisonsubzeroKZ 3 года назад
@@dpwoficial ola não estou encontrado seu curso na udemy, foi removido?
@dpwoficial
@dpwoficial 3 года назад
@@gleisonsubzeroKZ Sim. Ele não consta mais no catálogo da Udemy; desculpe.
@eduardovieira1766
@eduardovieira1766 4 года назад
Ficou muito top o vídeo!
@dpwoficial
@dpwoficial 4 года назад
Muito obrigado, Eduardo! o/
@diegoi7
@diegoi7 3 года назад
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
@dpwoficial 3 года назад
Vai começar com o pé direito.
@igorxp
@igorxp Год назад
Muito bom! parabens!
@dpwoficial
@dpwoficial Год назад
vlw, Igor!
@HerlonCosta
@HerlonCosta 11 месяцев назад
Que explicação sensacional, sem palavras!
@dpwoficial
@dpwoficial 11 месяцев назад
Muito obrigado!
@laissa1207
@laissa1207 Год назад
Obrigada!!!
@dpwoficial
@dpwoficial Год назад
Disponha!
@vshstat
@vshstat 2 года назад
Muito bom
@dpwoficial
@dpwoficial 2 года назад
vlw
@lucasbertoldo5062
@lucasbertoldo5062 3 года назад
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
@dpwoficial 3 года назад
Muito obrigado, Lucas! Com certeza não vai se arrepender da inscrição. ;)
@asamadoasa6517
@asamadoasa6517 2 года назад
melhor canal
@dpwoficial
@dpwoficial 2 года назад
haha Obrigado pela consideração. Ainda chegamos lá. o/
@heltoncunha7264
@heltoncunha7264 2 года назад
muito bem explicado! mais um inscrito!
@dpwoficial
@dpwoficial 2 года назад
Opa, aí sim, Helton! o/
@hevityaus631
@hevityaus631 2 года назад
Devagar e bem explicado, vlw pelo vídeo cara.
@dpwoficial
@dpwoficial 2 года назад
Eu que agradeço pelo comment. :)
@alexalannunes
@alexalannunes 3 года назад
Q vídeoooo Massaaaa hehe
@dpwoficial
@dpwoficial 3 года назад
Vídeo BEM massa. 🙃
@jamaunascimento
@jamaunascimento 11 месяцев назад
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
@dpwoficial 11 месяцев назад
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/
@kelvinalisson6982
@kelvinalisson6982 3 года назад
Parabens pelo vídeo
@dpwoficial
@dpwoficial 3 года назад
Vlw, Kelvin!
@vitonilcius
@vitonilcius Год назад
Muito bom o vídeo. Foi o vídeo que mais deixou claro o assunto
@dpwoficial
@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/
@alexandreandrade5172
@alexandreandrade5172 6 месяцев назад
Obrigado. Muito boa sua explicação do tema.
@dpwoficial
@dpwoficial 6 месяцев назад
Disponha!
@andersonnascimento9864
@andersonnascimento9864 3 года назад
Vídeo BEM informativo.
@dpwoficial
@dpwoficial 3 года назад
🙃
@brianronin505
@brianronin505 10 месяцев назад
Faça um bem pra você mesmo, use bem!
@dpwoficial
@dpwoficial 10 месяцев назад
BEM falado. :)
@chrystianramos1123
@chrystianramos1123 4 года назад
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
@dpwoficial 4 года назад
Vlw, Chrystian! ITCSS é um tema muito legal, também. Com certeza vamos abordar em algum momento.
@cardoso0_
@cardoso0_ Год назад
BEM + Sass Melhor combinação
@dpwoficial
@dpwoficial Год назад
De acordo.
@manzelo9855
@manzelo9855 7 месяцев назад
Cara, excelente conteúdo, muito obrigado pela aula.
@dpwoficial
@dpwoficial 7 месяцев назад
Imagina. Tamos aê.
@luistawloong865
@luistawloong865 11 месяцев назад
Ah cara, sorte eu dei de encontrar esse canal. Primeiro que eu ativei o sino. Obrigado pelo seu trabalho, dpw. Estou aprendendo bastante.
@dpwoficial
@dpwoficial 11 месяцев назад
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.
@santoserick9
@santoserick9 4 года назад
Voltei a usar BEM por conta desse canal TOP!!! Esperando vídeo sobre greensock
@dpwoficial
@dpwoficial 4 года назад
Aposto que seu código ficou BEM melhor! xD Olha... Greensock é um bom tema, mesmo! ;)
@renatowsaroca
@renatowsaroca Месяц назад
Masaaaassa!!!!
@dpwoficial
@dpwoficial Месяц назад
o/
@Energia2646
@Energia2646 3 года назад
ok obg
@dpwoficial
@dpwoficial 3 года назад
De nada.
@Paulo-cf4mh
@Paulo-cf4mh 4 года назад
Parabéns pelo vídeo, não conhecia, achei muito interessante , vou começar a usar.
@dpwoficial
@dpwoficial 4 года назад
Obrigado, Paulo. Faz BEM em começar a usar. Com certeza vai ajudar a melhorar seu código. :)
@salvimateus
@salvimateus 4 года назад
entrei, dei like, depois eu volto pra assistir
@dpwoficial
@dpwoficial 4 года назад
hahaha, quando voltar, dá outro like! ;)
@marlinho206
@marlinho206 2 года назад
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
@dpwoficial 2 года назад
Já está feito, Marlon. :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-aUe-YXUJVgk.html
@eddev13
@eddev13 3 года назад
Até que enfim uma explicação decente que me fez entender como utilizar o BEM ... super obrigado :)
@dpwoficial
@dpwoficial 3 года назад
Que bom que o vídeo ajudou BEM.
@nderXP
@nderXP 3 месяца назад
achei que era BEM de Bonito, Elegante e Majestoso
@dpwoficial
@dpwoficial 3 месяца назад
haha Pode ser também! :)
@evandromottaz
@evandromottaz 2 года назад
Muito bem explicado, gostei muito da metodologia e com certeza aplicarei em meus projetos. Muito obrigado por compartilhar conhecimento de qualidade!
@dpwoficial
@dpwoficial 2 года назад
Eu que agradeço pelas palavras. :)
@kevinl.a2003
@kevinl.a2003 6 месяцев назад
Rapaz, achei interessante, vou aderir 😅
@dpwoficial
@dpwoficial 6 месяцев назад
Vale a pena.
@danielzebinilourenco7730
@danielzebinilourenco7730 4 года назад
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
@dpwoficial 4 года назад
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
@danielzebinilourenco7730 4 года назад
@@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
@dpwoficial 4 года назад
Exatamente isso. Muito obrigado pela participação, Daniel. Apareça. :)
@fnscluis
@fnscluis 4 года назад
Show. Quero me aprofundar nessas metodologias.
@dpwoficial
@dpwoficial 4 года назад
Boa, Luís. Vai ver que isso vai te ajudar muito e seu código vai ficar BEM melhor. :)
@adryanmendes8646
@adryanmendes8646 2 года назад
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
@dpwoficial 2 года назад
Bom saber, Adryan. Abs
@romuloalves9349
@romuloalves9349 4 года назад
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
@dpwoficial 4 года назад
E faz muito BEM de usar! ;) Não é a toa que ela é uma das metodologias de CSS mais usadas no mundo.
@salvimateus
@salvimateus 4 года назад
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
@dpwoficial 4 года назад
Esse namespace js- salva vidas, cara... O cara que inventou isso merece um prêmio!
@deividyhertz3621
@deividyhertz3621 3 года назад
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
@dpwoficial 3 года назад
"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.
@arozendojr
@arozendojr 4 месяца назад
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
@dpwoficial 4 месяца назад
Nunca nem ouvi falar. '-'
@numseidizer
@numseidizer 4 года назад
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
@dpwoficial 4 года назад
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.
@dvalmont07
@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
@dpwoficial Год назад
Zero conflitos. Pelo contrário: usando parent selector de Sass para gerar BEM é bastante limpo e eficiente. :)
@fabinho1143
@fabinho1143 3 года назад
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
@dpwoficial 3 года назад
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.
@Blaizy2011
@Blaizy2011 3 года назад
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
@dpwoficial 3 года назад
Tá errado. Teria que ser "btn btn--large btn--rounded".
@thiagomoraes791
@thiagomoraes791 Год назад
a metodologia BEM é mais pra nome de class? mas tp seria uma boa ideia usar bem e a cascata default do css ?
@dpwoficial
@dpwoficial Год назад
Sim, é mais para nome de classes. A Cascata de CSS a gente sempre usa, querendo ou não. =P
@renanmorais3038
@renanmorais3038 3 года назад
Bem interessante! No caso dos elementos do bootstrap, você "ignora" as classes dele e cria novas para estilização?
@renanmorais3038
@renanmorais3038 3 года назад
Por exemplo utilizo navbar, grid, spinners, display, flex, spacing, sizing e text do bootstrap e quero aplicar essa metodologia
@dpwoficial
@dpwoficial 3 года назад
Pode usar junto, sem problema. Dá uma olhada na nossa live de tira-dúvidas sobre BEM que abordamos isso: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-STUy1I2qQjE.html
@FelipeSMdaRosa
@FelipeSMdaRosa 5 месяцев назад
Foi BEM explicado kkkkkkkkkk
@dpwoficial
@dpwoficial 5 месяцев назад
#tudumtss
@bardX21
@bardX21 2 года назад
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
@dpwoficial 2 года назад
Não entendi direito. Qual seria a estrutura?
@willsandres
@willsandres 4 года назад
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
@dpwoficial 4 года назад
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).
@potamo1288
@potamo1288 4 года назад
ou você poderia fazer um video usando pug, aquele template html, vlw video top, vou tentar aplicar o BEM no sass
@dpwoficial
@dpwoficial 4 года назад
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
@potamo1288 4 года назад
@@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
@dpwoficial 4 года назад
Olha só! Legal saber. Você vai ver que vai te ajudar MUITO.
@guilherm3fx
@guilherm3fx 3 года назад
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
@dpwoficial 3 года назад
Se for para seguir BEM, estaria errado sim. Teria que ser nav__menu, nav__item etc.
@pedroreis8541
@pedroreis8541 3 года назад
Eu consigo conciliar essa metodologia BEM com bootstrap, teria um exemplo de código?
@dpwoficial
@dpwoficial 3 года назад
Oi, Pedro. Tem como, sim. Dá uma olhada aqui: en.bem.info/forum/52/
@anarktv8098
@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
@dpwoficial Год назад
Onde consta que a recomendação do W3C é utilizar "em"?
@anarktv8098
@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
@dpwoficial Год назад
@@anarktv8098 Opa, pode enviar o link?
@ellyfbernardo
@ellyfbernardo 3 года назад
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
@dpwoficial 3 года назад
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.
@tarciodesouza6649
@tarciodesouza6649 2 года назад
Meu xará kkkkk
@dpwoficial
@dpwoficial 2 года назад
Tá de zoas! haha o/
@salvimateus
@salvimateus 4 года назад
Em que situação é útil o número da linha do seu vscode começar a contagem da linha atual?
@dpwoficial
@dpwoficial 4 года назад
haha, para quem usa vim (ou emulador de vim) isso é útil pra caramba. ;)
@salvimateus
@salvimateus 4 года назад
@@dpwoficial pq? haha
@dpwoficial
@dpwoficial 4 года назад
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
@salvimateus 4 года назад
@@dpwoficial hummmmmmmm que trampo haha
@dpwoficial
@dpwoficial 4 года назад
😜
@emanueldsc
@emanueldsc 4 года назад
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
@dpwoficial 4 года назад
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. 👍
@alexandrezapponi8411
@alexandrezapponi8411 Год назад
Vc prefere dois monitores a um super wide ??
@dpwoficial
@dpwoficial Год назад
Sim.
@Megatorial
@Megatorial 3 года назад
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
@dpwoficial 3 года назад
Preferencialmente, a segunda opção. Mesmo fora de BEM, não é muito bom usar seletor de elementos.
@Megatorial
@Megatorial 3 года назад
@@dpwoficial obg
@dpwoficial
@dpwoficial 3 года назад
@@Megatorial Não há por onde.
@chrystianramos1123
@chrystianramos1123 4 года назад
Opa! Primeiro a curtir e a comentar!
@dpwoficial
@dpwoficial 4 года назад
haha, vlw, Chrystian! ;)
@cabralfilho.
@cabralfilho. Год назад
eu aqui em 2022
@dpwoficial
@dpwoficial Год назад
OK...
@raidertm1653
@raidertm1653 2 года назад
Meu codigo CSS tá uma bagunça sksksksks
@dpwoficial
@dpwoficial 2 года назад
www.cssalemdosensocomum.com.br/
@Matheus.Stopinski
@Matheus.Stopinski 7 месяцев назад
Com o conhecimento que vc tem quanto ganha por mes? pq sabe muito.
@dpwoficial
@dpwoficial 7 месяцев назад
Obrigado, Matheus!
@SamuelNasta
@SamuelNasta 2 года назад
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
@dpwoficial 2 года назад
¯\_(ツ)_/¯
@LennonSantosBR
@LennonSantosBR Год назад
BEM até que é legal, mas ainda bem que inventaram tailwind hehe
@dpwoficial
@dpwoficial Год назад
São coisas completamente diferentes. Incomparáveis.
@LennonSantosBR
@LennonSantosBR Год назад
@@dpwoficial discordo. Eu entendo que são duas abordagens para escrever e manter css.
@dpwoficial
@dpwoficial Год назад
@@LennonSantosBR Site BEM: "BEM is a component-based approach to web development". Site TW: "A utility-first CSS framework".
@LennonSantosBR
@LennonSantosBR Год назад
@@dpwoficial banana e maçã são diferentes, mas são frutas.
@renatolins9812
@renatolins9812 3 года назад
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
@dpwoficial 3 года назад
Todos os pontos levantados foram devidamente refutados no vídeo. Aqui tem mais infos e exemplos: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-STUy1I2qQjE.html Vlwww
@renatolins9812
@renatolins9812 3 года назад
@@dpwoficial Se puder conferir: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-8EUsRcfye_8.html E: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QdfjWRc4ySA.html 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.
@Souumzumbi
@Souumzumbi 2 года назад
No exemplo dado aos 13:30, seria errado utilizar no button a classe card__btn?
@dpwoficial
@dpwoficial 2 года назад
Se o botão fizesse parte, exclusivamente, do card, não; no exemplo, o botão era um outro componente.
@Souumzumbi
@Souumzumbi 2 года назад
@@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
@dpwoficial 2 года назад
@@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.
Далее
Variáveis CSS: O Jeito Certo
12:40
Просмотров 8 тыс.
She’s Giving Birth in Class…?
00:21
Просмотров 3,8 млн
Learn CSS BEM (and avoid these common mistakes)
15:36
Просмотров 4,3 тыс.
How To Make Toggle Button Using HTML & CSS
5:27
Просмотров 63 тыс.
O Básico de Sass para se Virar nas Webs
22:40
Просмотров 15 тыс.
Media Queries e Breakpoints: o Básico e Fundamental
17:51
HTML 10x Mais Rápido com Emmet
12:49
Просмотров 6 тыс.