Social Links Profile with SCSS

Community feedback

• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 7 months ago

  Olá @mendesdomingosdev, novamente parabéns pelo projeto, ele ficou mutio semelhante ao design proposto.

  Como o comentário acima(ou abaixo) disse, você usou muitos scss, mas calma que vou explicar isso, o que aconteceu não é que você utilizou muitos arquivos scss, mas sim que você utilizou todos como um arquivo normal, geralmente quando vamos fazer um projeto no scss, nós criamos um arquivo onde será importado todos arquivos parciais, os arquivos parciais, nós escrevemos eles com um underline como prefixo, exemplo: _header.scss, dessa forma você fala pro compilador não transformar esse arquivo em um CSS, assim evita que tenha vários CSS no seu projeto.

  No seu projeto por exemplo, base.scss seria o único sem underline, já o o main.scss e button.scss teriam que ter o underline, para que não fossem compilados em CSS também.

  Se me permite, esses dias atrás eu fiz um projeto, e acho que talvez ele ilustre bem o que eu quero dizer, é esse o projeto: Time Tracking Dashboard - Repo, nele vá no arquvio index.scss que é o scss base, ali você verá como é feita esse parte de importação, e logo em seguida vá na pasta scss que você verá como são os arquivos parciais.

  Agora sobre a metodologia BEM, ela está com a ordem trocada, no seu projeto tem por exemplo <div class="card-content__text"> o correto na metodologia BEM, seria: <div class="card__content-text">, a separação de Bloco e Elemento é feita com "__", e palavras compostas são separadas por "-".

  Edit: Tanto que se você utilizasse a classe dessa forma card__content-text, você conseguiria usar um parent selector, que ficaria assim:

  .card {
      /* Propriedades omitidas */
      &__content-text {
          /* Propriedades omitidas */
      }
  }
  

  Esse, &__content-text, seria equivalente a .card__content-text, isso porque ele pega o nome do seletor pai com o &, e adiciona o resto que você escrever ali, que no caso é __content-text

  E novamente parabéns pela conclusão de mais um projeto, e principalmente por ter aplicado novos conceitos, caso algo que eu tenha dito tenha ficado confuso, já sabe, só comentar aqui embaixo.

  Marked as helpful

  1

  ---

  

  mendesdomingosdev•110

  @mendesdomingosdevPosted 7 months ago

  @R3ygoski Acredita que eu tava realmente com essa dúvida de ter tanto arquivos css? kkkkkkkk eu achei estranho, mas fiquei tipo "humm deve ser assim mesmo", essa do parent selector é mto interessante, nem sabia que dava pra fazer algo assim, vou aplicar 😶‍🌫️obrigado por me ajudar dnv kkkkk edit: ficou lindinho e arrumado, agora falta tirar um dia pra fazer em todos os outros já feitos

  1
• 

  Carsten Körner•170

  @carstenkoernerPosted 7 months ago

  Your result looks really good. Great work. I'm not a professional yet, but if you'd like some tips, I can tell you the following.

  • You are working with several scss files. You should set your tool for compiling so that only one css file is created, which then contains everything.
  • For more accessibility on your pages, you can also set a focus on links. This helps people who use the keyboard and the tab key to scroll through the links or input fields on the page.

  JM2C

  Marked as helpful

  1

  ---

  

  mendesdomingosdev•110

  @mendesdomingosdevPosted 7 months ago

  @carstenkoerner I see, I'm gonna take a look about this focus, since it's new for me tnhx

  0