-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add task solution #4887
base: master
Are you sure you want to change the base?
add task solution #4887
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
card
andstars
each in it own fileelements
,modifiers
andpseudo-classes
stars--N
modifiers work as expected (Highlight firstN
stars)