Develop #4906
Develop #4906
Conversation
MiltonMario
commented
Oct 5, 2024
MiltonMario
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your CSS file! It's well-structured and follows most of the best practices. Just a few minor improvements are needed, such as optimizing repeated styles and ensuring consistent indentation. Keep up the good work and consider these tips for your next update! 😊👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <div class="stars__box"> | ||
| <div class="stars stars--0"> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| </div> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for better readability as per the checklist.
| <div class="stars stars--1"> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| </div> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for better readability as per the checklist.
| <div class="stars stars--2"> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| </div> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for better readability as per the checklist.
| <div class="stars stars--3"> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| </div> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for better readability as per the checklist.
| <div class="stars stars--4"> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| <span class="stars__star"></span> | ||
| </div> |
There was a problem hiding this comment.
Add an empty line between sibling blocks of HTML for better readability as per the checklist.
| .page { | ||
| margin: 0; | ||
| padding: 0; | ||
| background-color: #fff; | ||
| } |
There was a problem hiding this comment.
According to the checklist, avoid using tag names for styling, with the exception of html and body. Here, the .page class seems to be intended as a global style that could be applied directly to the body tag, which is an exception to this rule. If .page is indeed meant for the body, consider applying these styles directly to the body tag.
| .stars__star { | ||
| display: flex; | ||
| background-image: url(images/star.svg); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| width: 16px; | ||
| height: 16px; | ||
| } |
There was a problem hiding this comment.
You have repeated styles for background-repeat and background-position in the .stars__star class and also in the .stars--1 .stars__star class. To adhere to the DRY (Don't Repeat Yourself) principle, consider removing the repeated properties from the .stars--1 .stars__star class (lines 32-34) as they are already defined in the .stars__star class.
| .stars--1 .stars__star:nth-child(-n + 1) { | ||
| background-image: url(images/star-active.svg); | ||
| background-repeat: no-repeat; | ||
| background-position: center; |
There was a problem hiding this comment.
The properties background-repeat: no-repeat; and background-position: center; are repeated here and in the .stars__star class. You can remove them from here since they are already defined in the .stars__star class.
| background-image: url(images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
The background-image property is repeated across multiple selectors for .stars--2 .stars__star, .stars--3 .stars__star, etc. Consider using a more efficient method to apply these styles, such as combining selectors that share the same properties to reduce code duplication. For example, you can write a single selector like .stars--2 .stars__star:nth-child(-n + 2), .stars--3 .stars__star:nth-child(-n + 3), ... { background-image: url(images/star-active.svg); }.
