Blog Preview Card

Community feedback

• 

  M•940

  @Dev-MV6Posted 7 months ago

  Hi there, good job on completing the challenge.

  Code readability is essential in collaborative environments. One piece of advice I can give you to improve is to start using more descriptive names for your classes.

  This will help you when working on larger projects where the style sheets are much longer. If you develop the habit of using descriptive class names for your elements, you won't get lost if you ever need to scale your code, and it will certainly help other developers understand it more easily.

  For example, instead of using class-names like container, content, author, try to think of the element you are styling as a component and the elements inside that element (children elements) as parts of that component.

  This way,

  • Instead of .container, you can use .card for the main container, now it's a component
  • Since .content is part of the .card component you can use .card-content
  • .author would be .card-author
  • Instead of using .text h1 to select the card title you can assign a class like .card-content__title to the h1 element an use it as selector in your CSS

  Don't get frustrated if you struggle with finding the best descriptive class name for your elements at first, you'll better at that with time.

  Another thing you can do to improve your code readability is to write your CSS selectors from top to bottom, in hierarchical order so the parent elements of the component go first, and the sibling elements just like they are positioned in the HTML tree.

  For example, in your code the .box should go before the .author selector because the .box element is positioned before the .author element in the card.

  Hope you find this helpful 👍

  Marked as helpful

  2

  ---

  

  mendesdomingosdev•110

  @mendesdomingosdevPosted 7 months ago

  @Dev-MV6 Very helpful, thnx a lot

  0
• 

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 7 months ago

  Olá novamente @mendesdomingosdev, parabéns por ter concluído mais um projeto, ficou simplesmente perfeito.

  Sobre o seu CSS, sinceramente, eu não achei ele bagunçado, mas uma dica seria de você separar em seções, por exemplo, no topo vem o seletor global (*), logo em seguida vem os seletores de tags (h1, h2, body, etc...), logo em seguida os seletores de classe e por último os seletores de id. Outra coisa que pode ajudar é colocar o reset em um arquivo CSS separado, chamado reset.css, e colocar as media query em um arquivo separado chamado responsive.css.

  Outra coisa que você pode achar interessante, seria utilizar o Sass/Scss, que é um pré-processador de CSS, que funciona em perfeição com a metodologia BEM.

  Eu pessoalmente prefiro o Scss pois ele é mais próximo do CSS do que o Sass em si.

  Abaixo alguns links sobre Sass e BEM:

  • Sass - Docs
  • Medium - BEM
  • Medium - Sass and BEM perfect match

  E novamente, parabéns pelo seu projeto, continue assim. Caso algo que eu tenha dito não tenha ficado claro, por favor, pergunte aqui embaixo que tentarei responder a melhor forma possível.

  Marked as helpful

  1

  ---

  

  mendesdomingosdev•110

  @mendesdomingosdevPosted 7 months ago

  @R3ygoski Obrigado dnv por avaliar meu projetinho <3 vou dar uma estudada e aplicar esses dois nesse projeto, sobre separar os conteúdos seria como os components? eu passei um sofrimento fazendo um usando Astro(bem aleatório kkkkk)

  1

  

  Bernardo Poggioni•5,280

  @R3ygoskiPosted 7 months ago

  @mendesdomingosdev não há de que, sobre essa parte de separar conteúdo, acredito que você esteja se referindo a parte que falei de separar em arquivos correto? Sim, seria quase isso de componente, você cria 3 ou 4 arquivos de CSS, exemplo:

  • responsive.css que é para a parte de responsividade;
  • style.css que é o estilo padrão sem responsividade;
  • reset.css que é para adicionar o reset do seu CSS;
  • variables.css onde você coloca todas suas variáveis.

  isso pode ajudar na organização porque não fica aglomerando tudo em um só arquivo, daí é só importar os 4 no seu HTML. E não se preocupe, isso é muito mais fácil do que ter que usar o Astro, ainda não usei esse Framework, mas pretendo.

  E uma dica meio off-topic, se estiver complicado aprender a usar o Astro, eu recomendo que você dê uma olhada no Svelte, Vue ou React, que eles são bem mais práticos e fáceis até de se trabalhar com a Componentização.

  Marked as helpful

  1

  

  mendesdomingosdev•110

  @mendesdomingosdevPosted 7 months ago

  @R3ygoski Fiz agora mais cedo e ficou bem organizadinho, só não sei se usei corretamente e aparentemente ficou mais tranquilo de entender o projeto, por ser pequeno não fez uma diferença brusca kkkkk mas com certeza vi a necessidade de usar em algum projeto grande.

  Sobre frameworks eu realmente vou ir de React, mas acredita, eu tava querendo criar um blog e pesquisei como criar, todas as soluções pareciam bem acima do que eu consigo entender, daí veio o Astro com o seu "Crie seu blog markdown", achei perfeito kkkkk e na doc ele te pega pela mão e vai ensinando tudo, achei perfeito pra um noob como eu.

  Aí eu finalmente pude entender o que eram realmente componentes no nível mais básico pelo menos e subir um site, apesar de que ele faz toda a parte díficil, mas foi uma experiência bem rica, agora eu consigo me ver realizando mudanças no site, refatorar código(precisa muito) e muito mais. kkkkk

  1