Interactive Rating Component

Community feedback

• 

  Alberto Ledesma•370

  @ledesmxPosted 11 months ago

  Hi Juan Martín Rivas 👋

  Great job on your solution!

  The rating component works pretty well.

  To make perfect circles there is a better approach. Here's what I would do:

  • First of all the padding will not help us in this case, so remove it.
  • Then fix the height and the width of the element to make a square. I suggest using the aspect-ratio property together with height/width. No problem if you use height and width.

  main .card .buttons-list .list-item > .rating-text {
  //
    height: 3rem;
    aspect-ratio: 1/1;
  }
  

  • This along with the border-radius: 50%; will make a perfect circle. But the numbers will not be centered. Lastly, to center the content you can use either flex or grid. I recommend using grid along with the place-content property.

  main .card .buttons-list .list-item > .rating-text {
    display: grid;
    place-content: center;
  }
  

  In summary, I suggest adding this code:

  main .card .buttons-list .list-item > .rating-text {
    height: 3rem;
    aspect-ratio: 1/1;
    display: grid;
    place-content: center;
  }
  

  And removing this:

  main .card .buttons-list .list-item > .rating-text {
    padding: .75em 1.25em;
    display: block;
  }
  

  Regarding to your question about the classes' names I let you these links about BEM and SUIT CSS that I believe will be of great interest to you:

  https://en.bem.info/methodology/

  https://suitcss.github.io/

  I hope this helps a little.

  Well done for the rest.

  Marked as helpful

  2

  ---

  

  Juan Martín Rivas•190

  @JuanMartinRivasPosted 10 months ago

  @AlbertoLed Thank you so much for your comment. I changed the styles on the rating buttons according to your recomendations. I'll definetely be using this method from now on every time I try to create circles in CSS. I've also been reading about BEM and SUIT CSS through the links you've sent me and I started applying this methodologies in the projects I'm currently working on. Once again thanks for your comment it was really helpful.

  1