add task stars #4907
add task stars #4907
Conversation
IrynaSwiss
commented
Oct 6, 2024
IrynaSwiss
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great effort on the Pull Request! 🌟 Just a few things to keep in mind for the future: always include fallback fonts, use classes over tag names for styling, opt for relative units for scalability, format your attributes correctly, and maintain proper spacing and indentation for readability. Keep up the good work and always strive to improve your code! 💪
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <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 multiline sibling blocks of HTML. There should be an empty line before and after each
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| margin-right: 4px; | ||
|
|
||
| background-image: url(./images/star.svg); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } |
There was a problem hiding this comment.
Avoid fixing the size of containers if it's not a requirement. If the stars need to be of a specific size, consider making them scalable using relative units like 'em' or 'rem' instead of 'px' to maintain relative sizing and better responsiveness.
| margin: 0; | ||
| } | ||
|
|
||
| .stars { |
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 to avoid potential conflicts and enhance reusability.
| background-position: center; | ||
| } | ||
|
|
||
| .stars__star:last-child { |
There was a problem hiding this comment.
Remember to use fallback fonts. Even though you're not specifying any font-family here, ensure that your design includes fallbacks in case the main font doesn't load.
