Update readme.md #5192
Update readme.md #5192
Conversation
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
There are no files to review. Please make sure that you have added files to the pull request. Some files and directories may be ignored from the review or failed to load.
[CODE: 4]
Additional info:
Ignored files list:
readme.md
If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
There are no files to review. Please make sure that you have added files to the pull request. Some files and directories may be ignored from the review or failed to load.
[CODE: 4]
Additional info:
Ignored files list:
readme.md
If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
There are no files to review. Please make sure that you have added files to the pull request. Some files and directories may be ignored from the review or failed to load.
[CODE: 4]
Additional info:
Ignored files list:
readme.md
If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
There are no files to review. Please make sure that you have added files to the pull request. Some files and directories may be ignored from the review or failed to load.
[CODE: 4]
Additional info:
Ignored files list:
readme.md
If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.
src/index.html
Outdated
| <div class="stars stars--0"> | ||
| <div class="star__element"></div> |
There was a problem hiding this comment.
| <div class="stars stars--0"> | |
| <div class="star__element"></div> | |
| <div class="stars stars--0"> | |
| <div class="stars__element"></div> |
follow the BEM pattern (block__element)
| .stars--3 .star__element:nth-child(-n + 3)::before, | ||
| .stars--4 .star__element:nth-child(-n + 4)::before, | ||
| .stars--5 .star__element:nth-child(-n + 5)::before { | ||
| z-index: 2; |
| .stars__element { | ||
| width: 16px; | ||
| height: 16px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-right: 4px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .stars__element::before { | ||
| content: ''; | ||
| width: 12px; | ||
| height: 12px; | ||
| background-image: url('../images/star.svg'); | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| display: block; | ||
| z-index: 1; | ||
| } |
There was a problem hiding this comment.
you don't need to create files for each element, only for each bem block
| .stars__element { | ||
| width: 16px; | ||
| height: 16px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-right: 4px; | ||
| position: relative; | ||
| } | ||
|
|
||
| .stars__element::before { | ||
| content: ''; | ||
| width: 12px; | ||
| height: 12px; | ||
| background-image: url('../images/star.svg'); | ||
| background-size: cover; | ||
| background-repeat: no-repeat; | ||
| display: block; | ||
| z-index: 1; | ||
| } |
There was a problem hiding this comment.
you should not use before or after here, just add the background-image to stars-element
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 MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️