Social Links Profile using SASS

Community feedback

• 

  Bernardo Poggioni•5,360

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

  • BEM
  • Medium - BEM
  • DEV.to - BEM + SASS

  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 helpful

  1

  ---

  

  Murilo Matt•200

  @MuliroMattPosted 7 months ago

  @R3ygoski Obrigado pela dica, vou dar uma pesquisada sobre isso

  1
• 

  Junier Bolívar 🕷•710

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

  0
• 

  Yash Babani•890

  @Yashbabani0Posted 7 months ago

  Please fix your profile image as it is currently showing the alt tag.

  0