search bar no1 #4555
search bar no1 #4555
Conversation
There was a problem hiding this comment.
Great job on your work! 🎉 While there are some minor issues with selector usage and class naming conventions, they don't critically impact the functionality of your code. Keep these best practices in mind for future projects to enhance performance and maintainability. Keep up the great work! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <section | ||
| class="section-search-bar section-search-bar__big" | ||
| data-qa="big" | ||
| > |
There was a problem hiding this comment.
The use of 'section' here is correct as it is a semantic tag, but the class name 'section-search-bar__big' is not appropriate. According to the checklist, class names should represent the meaning of the content, not the styles or tag names.
| <section | ||
| class="section-search-bar section-search-bar__small" | ||
| data-qa="small" | ||
| > |
There was a problem hiding this comment.
Similar to the previous section, the class name 'section-search-bar__small' should represent the meaning of the content rather than styles or tag names.
|
|
||
| html, | ||
| body, | ||
| div, |
There was a problem hiding this comment.
Avoid using tag names for styling, except for html and body. Instead, use class selectors to apply styles.
| form, | ||
| label, | ||
| legend, | ||
| search-bar, |
There was a problem hiding this comment.
The search-bar selector is not a valid HTML tag. If this is meant to be a class, it should be prefixed with a dot (e.g., .search-bar).
| } | ||
|
|
||
| /* search-bars still need 'cellspacing="0"' in the markup */ | ||
| search-bar { |
There was a problem hiding this comment.
The search-bar selector is not a valid HTML tag. If this is meant to be a class, it should be prefixed with a dot (e.g., .search-bar).
| thead, | ||
| tr, | ||
| th, | ||
| td { |
There was a problem hiding this comment.
Avoid using the universal selector * or tag names for styling, except for html and body. Use class selectors instead to improve performance.
DEMO LINK
TEST REPORT LINK
[x ] Icon implemented using background-image CSS property
[ x] Inputs are written inside of 'form' tag with correctly passed attributes
[x ] All
Typical MistakesfromBEMlesson theory are checked.[x ] Code follows all the Code Style Rules ❗️