add task solution #4887
add task solution #4887
Conversation
There was a problem hiding this comment.
It looks like there are several issues with the BEM naming conventions that need to be addressed to ensure maintainability and consistency in your code. Additionally, make sure to link to the compiled CSS file instead of the SCSS file in your HTML. Keep up the good work, and once these changes are made, your code will be in great shape! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| rel="stylesheet" | ||
| href="./styles/index.scss" |
There was a problem hiding this comment.
The href attribute is pointing to a SCSS file. Typically, you should link to a CSS file in HTML. Ensure that the SCSS is compiled to CSS and link to the resulting CSS file instead.
| margin: 0; | ||
| } | ||
|
|
||
| .container { |
There was a problem hiding this comment.
The class name .container is too generic and might conflict with other styles. Consider using a more specific class name to avoid potential conflicts.
| &__img { | ||
| display: flex; | ||
| justify-content: center; | ||
| } |
There was a problem hiding this comment.
The class name &__img suggests a BEM (Block Element Modifier) naming convention, but it should be prefixed with the block name. Consider renaming it to .container__img or similar.
| &__img-imac { | ||
| width: 160px; | ||
| height: 134px; | ||
| } |
There was a problem hiding this comment.
The class name &__img-imac should follow the BEM naming convention. Consider renaming it to .container__img-imac or similar.
| &__texts-inform { | ||
| margin-top: 40px; | ||
| } |
There was a problem hiding this comment.
The class name &__texts-inform should follow the BEM naming convention. Consider renaming it to .container__texts-inform or similar.
| &__stars-reviews { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: flex-end; | ||
| margin-bottom: 24px; | ||
| } |
There was a problem hiding this comment.
The class name &__stars-reviews should follow the BEM naming convention. Consider renaming it to .container__stars-reviews or similar.
| &__review-text { | ||
| padding: 0; | ||
| font-size: 10px; | ||
| font-weight: 400; | ||
| line-height: 14px; | ||
| text-align: right; | ||
| } |
There was a problem hiding this comment.
The class name &__review-text should follow the BEM naming convention. Consider renaming it to .container__review-text or similar.
| &__price-container { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| margin-bottom: 16px; | ||
| height: 18px; | ||
|
|
||
| &-label { | ||
| font-size: 12px; | ||
| line-height: 18px; | ||
| font-weight: 400; | ||
| color: $second-text-color; | ||
| } | ||
|
|
||
| &-price { | ||
| font-size: 16px; | ||
| font-weight: 700; | ||
| line-height: 18px; | ||
| } | ||
| } |
There was a problem hiding this comment.
The class name &__price-container and its nested elements should follow the BEM naming convention. Consider renaming them to .container__price-container, .container__price-container-label, and .container__price-container-price or similar.
| &__button { | ||
| box-sizing: border-box; | ||
| margin-bottom: 16px; | ||
| display: flex; | ||
| justify-content: center; | ||
| width: 100%; | ||
| height: 40px; | ||
| background-color: #00acdc; | ||
| border: 1px solid #00acdc; | ||
| border-radius: 5px; | ||
| color: #fff; | ||
| text-transform: uppercase; | ||
| font-size: 14px; | ||
| font-weight: 700; | ||
| line-height: 40px; | ||
| text-decoration: none; | ||
|
|
||
| &:hover { | ||
| background-color: white; | ||
| color: #00acdc; | ||
| } | ||
| } |
There was a problem hiding this comment.
The class name &__button should follow the BEM naming convention. Consider renaming it to .container__button or similar.
| &--1 .stars__star:nth-child(-n + 1), | ||
| &--2 .stars__star:nth-child(-n + 2), | ||
| &--3 .stars__star:nth-child(-n + 3), | ||
| &--4 .stars__star:nth-child(-n + 4), | ||
| &--5 .stars__star:nth-child(-n + 5) { |
There was a problem hiding this comment.
The BEM naming convention is not correctly followed here. The modifier class '&--1', '&--2', etc., should be applied to the block element directly, not as a separate class. Consider using '.stars--1', '.stars--2', etc., to maintain consistency with BEM conventions.
cardandstarseach in it own fileelements,modifiersandpseudo-classesstars--Nmodifiers work as expected (Highlight firstNstars)