Interactive rating component using Flexbox

Community feedback

• 

  Tic_Tac1602•360

  @TicTac1602Posted over 2 years ago

  Hello Alice, first of all nice job everything works just fine. I will try to answer your question by putting my response after the question.

  "I'm not completely sure what should be an id and what should be a class, is my usage here ok?"

  An id is unique where classes can be shared between different component. You made a good use of them since you have used only ID. And it is correct since almost every part is working by its own and do not share styling with another component. Nonetheless, you could have used a class for both cards where you could have set the background color the border-radius and so on... As the 2 cards are sharing those styling.

  "I found naming tougher and felt a bit conflicted about naming the elements in the html to reference in the CSS (should I just reference the elements by attribute instead of giving everything a class/id?)"

  Giving a class and/or an ID is nice for accessibility Reason. So that person can know what they are pointing or looking or hearing. So naming is up to you, but the BEM method could help you make naming easier.

  Layout of CSS - what can I do to make it more readable/clearer?

  I found the layout pretty much noise. But something made me ask questions. To what extend is the rating score a button? To what extend is the star icon a button? For me this should not have been a button HTML tag

  Those are the fix I can see to your question, please let me know if it helped you getting even better

  Once again very nice job on this challenge TicTac1602

  Marked as helpful

  0