Conversation
sunshine-coder-prog
commented
Mar 9, 2026
sunshine-coder-prog
commented
- DEMO LINK
- TEST REPORT LINK
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job on implementing the star rating component! The HTML structure is well-organized, and the CSS logic for displaying the active stars is efficient.
However, this requires changes because the project's file structure rules have not been followed. The checklist specifies that each BEM block must have its own separate file [CHECKLIST ITEM #2]. In your submission, the styles for the .stars block are combined with general page styles in src/style.css. Please move all styles related to the stars block into their own dedicated file, such as stars.css.
Additionally, as a minor improvement, the empty <header> tag in index.html doesn't add semantic value and can be removed.
Once you've separated the CSS files, your solution will be ready!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Important
Fix the issues, commit the changes, and then re-request my review using the Re-request review button2 in the Reviewers tab.
Tip
If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag3.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.
Caution
Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.
Footnotes
src/index.html
Outdated
| <h1>Stars</h1> | ||
| <!-- #endregion --> | ||
| <body class="body"> | ||
| <header class="header"></header> |
There was a problem hiding this comment.
While using semantic tags like <header> is good practice, an empty one doesn't add semantic value to the page. If this element is not intended to hold any content, it would be better to remove it.
src/style.css
Outdated
| /* #region page */ | ||
| .body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| .stars { | ||
| margin: 0; | ||
| padding: 0; | ||
| display: flex; | ||
| list-style: none; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| background-image: url(images/star.svg); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| margin-right: 4px; | ||
| } | ||
|
|
||
| .stars__star:last-child { | ||
| margin-right: 0; | ||
| } | ||
|
|
||
| .stars--1 .stars__star:nth-child(-n + 1), | ||
| .stars--2 .stars__star:nth-child(-n + 2), | ||
| .stars--3 .stars__star:nth-child(-n + 3), | ||
| .stars--4 .stars__star:nth-child(-n + 4), | ||
| .stars--5 .stars__star:nth-child(-n + 5) { | ||
| background-image: url(images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
This file violates checklist item #2: 'Each BEM block has its own separate file'.
You've combined general page styles (.body) with the styles for a specific BEM block (.stars). According to the BEM methodology and the project guidelines, the styles for the stars block should be in a separate file, for example, stars.css.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Excellent work on this pull request! You've successfully addressed all the feedback from the previous review, particularly by separating the styles for the .stars block into its own dedicated file. The code is now clean, well-structured, and fully meets all the task requirements. I am approving your solution. Keep up the great work!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
