add stars #4844
add stars #4844
Conversation
IRybii
commented
Sep 20, 2024
IRybii
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your Pull Request! I'm approving it because there are no critical issues affecting functionality or security. Just remember to keep an eye on your formatting and indentation in the future to maintain clean and readable code. Consistency is key! 🌟 Keep it up, and happy coding! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <body> | ||
| <h1>Stars</h1> | ||
| <div class="stars stars--0"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--1"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--2"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--3"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <div class="stars stars--5"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> |
There was a problem hiding this comment.
Remember about correct indentation between parent and child elements. Each level of nesting should be offset by 2 spaces. Also, avoid blank lines between parent and child elements.
| <div class="stars stars--0"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> |
There was a problem hiding this comment.
Add empty lines between multiline sibling blocks of HTML to simplify reading and maintainability.
| .stars__star { | ||
| height: 16px; | ||
| width: 16px; | ||
| margin-right: 4px; | ||
| background-image: url('./images/star.svg'); | ||
| background-repeat: no-repeat; | ||
| background-position: 50%; | ||
| } |
There was a problem hiding this comment.
Don't use tag names for styling (except html and body). It's better to style elements using .classes. In this case, .stars__star is sufficient, and there's no need to add additional specificity with tag names.
| margin-right: 0; | ||
| } | ||
|
|
||
| .stars--0 .stars__star:nth-child(-n + 0), |
There was a problem hiding this comment.
Be consistent with your margins. Here you're adding margin-right to each .stars__star element, and then resetting it for the last child. It's better to add only bottom or top margin to maintain consistency and avoid potential margin collapse issues.
