layout_product-cards #4839
layout_product-cards #4839
Conversation
There was a problem hiding this comment.
Great job! Your code is clean and well-structured. You've followed the BEM methodology correctly and made good use of variables. There are a few minor issues to improve on for next time, but they don't impact the functionality of your code. Keep up the good work! 👍
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <img | ||
| src="images/imac.jpeg" | ||
| alt="iMac Product Image" | ||
| class="card__image" |
There was a problem hiding this comment.
The class name 'card__image' is used for both the div and img elements. This can lead to confusion and unexpected styles being applied. Consider using more descriptive and unique class names for each element. For example, 'card__image-container' for the div and 'card__image' for the img.
| <div class="stars__star"></div> | ||
| </div> | ||
|
|
||
| <p class="card__reviev">Reviews: 5</p> |
There was a problem hiding this comment.
There is a typo in the class name 'card__reviev'. It should be 'card__review'.
| <div class="card__price"> | ||
| <p class="card__price-tag">Price:</p> | ||
|
|
||
| <p class="card__price-price">$2,199</p> |
There was a problem hiding this comment.
The class name 'card__price-price' is a bit redundant. Consider simplifying it to 'card__price-value' or 'card__price-amount'.
src/styles/index.scss
Outdated
| @@ -1,3 +1,13 @@ | |||
| @import './utils/variables'; | |||
| @import './blocks/card'; | |||
| @import './blocks/starts'; | |||
There was a problem hiding this comment.
There seems to be a typo in the file name. It's supposed to be 'stars' instead of 'starts'.
DEMO LINK
TEST REPORT LINK
there 2 BEM blocks
cardandstarseach in it own fileSCSS Nesting is used for
elements,modifiersandpseudo-classesSCSS Variables are used for main values and placed in a separate file
all
stars--Nmodifiers work as expected (Highlight firstNstars)Code follows all the [Code Style Rules ❗️]