Faq accordion main | HTML | CSS | vanilla JS
Design comparison
Solution retrospective
This is the first time i used BEM for css class names. If someone has any tips, feel free to share them.
Community feedback
- @MelvinAguilarPosted 12 months ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
When following the BEM naming convention, avoid repeating
__
in class names because only one block name is allowed. For instance, the class name.card__list__header__minus__icon
doesn't follow the pattern: "block-name__element-name" and includes the block nameslist
,header
,minus
andicon
.You can reference an example of this error here: BEM Quick start - Nesting.
- It's a bit confusing that the entire div with the class
faq-card__list__header
has apointer cursor
, but the element that triggers the display is the<h2>
. To improve user experience and clarity, consider adding the event listener to the entire div container, making it clickable. This way, users won't be confused about where to click, and the interaction will feel more intuitive.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful0 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord