Design comparison
Solution retrospective
I applied the BEM methodology. And while studying BEM I saw a think called SMACSS, and I want to take a look at that.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?I wanted to know if i used BEM in the right way.
Community feedback
- @R3ygoskiPosted 6 months ago
Olá mais uma vez Murilo, parabéns por mais um projeto concluído.
Sobre sua metodologia BEM, ela está correta em partes. Veja trecho a seguir:
<section class="card__info"> <h3 class="card__category">Perfume</h3>
O correto, é que o
<h3>
fosse na verdadecard__info__category
.Agora uma dica sobre semântica, essa sua
<div class="card">
, poderia ser um<main>
, isso devido a nela estar o conteúdo principal.Agora sobre uma
<figure>
ele está correto, mas dentro dele, notei que você utilizou dias imagens, tem uma outra forma que é até melhor, se eu já tinha dado essa dica antes, já peço desculpas, mas é a de usar<picture>
, que dessa forma você consegue manipular qual imagem vai aparecer de acordo com o tamanho de tela, veja um exemplo:<picture> <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
Caso tenha ficado alguma duvida, por favor, me pergunte abaixo que tentarei ajudar da melhor forma possível.
E uma pergunta off-topic, o que o urso faz 🤔?
Marked as helpful0@MuliroMattPosted 6 months ago@R3ygoski como sempre valeu pelas dicas, muito legal essa tag
<picture>
, já vou atualizar meu código.Respondendo sua pergunta sobre o urso, ele panda
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord