Design comparison
Solution retrospective
I applied better class names for my elements.
What challenges did you encounter, and how did you overcome them?My challenge was to know what size to apply to things without the figma file.
What specific areas of your project would you like help with?I'd like some help in naming my classes, and how to write better SASS
Community feedback
- @R3ygoskiPosted 7 months ago
Olá novamente Murilo, e novamente parabéns por mais um projeto concluído.
A sua imagem não está carregando porque você esqueceu de colocar um ponto antes do
/assets
.Sobre suas duvidas, no comentário que fiz no seu outro post eu já falava um pouco dessa parte do SCSS e de como nomear melhor as classes no HTML, mas bom, vou aqui focar mais sobre BEM, já que no outro post eu já falei de SCSS.
Existe uma metodologia chamada BEM (Block__Element--modifier), ela é utilizada para nomear classes no HTML, e ela ajuda muito a manter uma organização no seu código, e também ela é bem intuitiva em vários aspectos, vou mostrar um exemplo de como ela seria:
<main class="card"> <article class="card__content"> <h1 class="card__content__title">Title</h1> <p class="card__content__description">Description</p> </article> <section class="card__plans"> <div class="card__plans__plan"></div> <div class="card__plans__plan--active"></div> </section> </main>
Dessa forma você separa cada elemento por (__) e cada modificador por (--), o que ajuda na identificação, e isso com o parent selector do SCSS funciona como uma perfeição. Caso esse meu exemplo não tenha ficado bom, deixarei aqui alguns links para você ver mais sobre BEM:
E novamente, parabéns pelo projeto, caso tenha ficado alguma duvida, já sabe, só comentar aqui em baixo que tentarei ajudar da melhor forma possível.
Marked as helpful1@MuliroMattPosted 7 months ago@R3ygoski Obrigado pela dica, vou dar uma pesquisada sobre isso
1 - @JunbolPosted 7 months ago
Hi Murilo! I took a look at your code and it did puzzled me what was wrong with it and I coudn't at first sight see what was wrong with it until I download and tested myself. The reason of the issue is Folder tree structure. You need to separate your SCSS file into a separate scss folder:
CSS folder:
- style.css
- style.css.map
SCSS folder:
- style.scss
If you do that your picture will show up in the circle.
Cheers
Junier
Marked as helpful0 - @Yashbabani0Posted 7 months ago
Please fix your profile image as it is currently showing the alt tag.
0
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