add solution #4973
add solution #4973
Conversation
There was a problem hiding this comment.
Great job on structuring the file correctly and using @import appropriately! While there are some minor style improvements suggested, they don't impact the functionality. Keep up the good work and consider the feedback for future enhancements! 🌟
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| @@ -9,10 +9,56 @@ | |||
| <title>Stars</title> | |||
There was a problem hiding this comment.
The title tag should be indented to match the other meta tags for consistency.
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
There should be an empty line between multiline sibling blocks of HTML to improve readability.
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
There should be an empty line between multiline sibling blocks of HTML to improve readability.
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
There should be an empty line between multiline sibling blocks of HTML to improve readability.
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
There was a problem hiding this comment.
There should be an empty line between multiline sibling blocks of HTML to improve readability.
| margin-right: 4px; | ||
| } | ||
|
|
||
| .stars--1 :nth-child(-n + 1) { |
There was a problem hiding this comment.
Avoid using tag names for styling. Instead of using ':nth-child', consider adding a class to the elements you want to style.
| background-image: url(../../images/star-active.svg) !important; | ||
| } | ||
|
|
||
| .stars--2 :nth-child(-n + 2) { |
There was a problem hiding this comment.
Avoid using tag names for styling. Instead of using ':nth-child', consider adding a class to the elements you want to style.
| background-image: url(../../images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--3 :nth-child(-n + 3) { |
There was a problem hiding this comment.
Avoid using tag names for styling. Instead of using ':nth-child', consider adding a class to the elements you want to style.
| background-image: url(../../images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--4 :nth-child(-n + 4) { |
There was a problem hiding this comment.
Avoid using tag names for styling. Instead of using ':nth-child', consider adding a class to the elements you want to style.
| background-image: url(../../images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--5 :nth-child(-n + 5) { |
There was a problem hiding this comment.
Avoid using tag names for styling. Instead of using ':nth-child', consider adding a class to the elements you want to style.
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 Mistakes from BEM lesson theory are checked.
Code follows all the Code Style Rules ❗️