solution #4898
solution #4898
Conversation
There was a problem hiding this comment.
Great job on adhering to most of the checklist requirements! 🌟 There are a few minor improvements suggested, like adding a fallback background color and adjusting attribute formatting, but these don't significantly impact the overall functionality or quality of your code. Keep up the good work, and consider these tips for your next project to make your code even better! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <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 improve readability. In this case, add an empty line after the closing tag of each '.stars' block.
| body { | ||
| margin: 0; | ||
| } |
There was a problem hiding this comment.
According to the checklist, avoid using tag names for styling. It's recommended to style elements using classes. However, the body tag is an exception to this rule, so this is just a general reminder for the rest of your CSS.
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| background: url(images/star.svg) center no-repeat; |
There was a problem hiding this comment.
Consider adding a fallback background color for the .stars__star in case the image fails to load, to maintain an acceptable user experience.
| .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: url(images/star-active.svg) center no-repeat; |
There was a problem hiding this comment.
Just like with the regular star, it's a good practice to add a fallback background color for the .stars--x .stars__star active state.
DEMO LINK
TEST REPORT LINK
Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
Each BEM block has its own separate file
All
Typical MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️