FAQ Challenge with Vanilla HTML CSS AND JS
Design comparison
Solution retrospective
Hey everyone!
Just completed my first challenge any feedback is more than welcome.
I tried using BEM but I am not sure if I understood the naming conventions.
Thank you!
Community feedback
- @artimysPosted about 4 years ago
Hi Suganya, congrats on completing your first challenge.
I'm still trying to get better at using BEM myself. One thing I noticed is how you used your modifier class. Someone can correct me here but I believe modifier classes are made to change an existing element's styles. Basically not used on its own.
- example of using block__element--modifier.
card__content--background
would add/modify any styles that classcard__content
contains<div class="card"> <div class="card__content card__content--background">
- example of using block--modifier (not sure if proper but I've seen it around).
card--dark-theme
adds/modifies thecard
class styles
<div class="card card--dark-theme"> <div class="card__content">
- if you find yourself having to use more than one word to describe a class. Separate each word with a single hyphen. Example: block-name
__
element-name-blah--
modifier-name
If you say it looks too long don't worry that's normal and one of the downsides to BEM
--
You laid out a good base for your javascript. Some extra pointers:
- Have more meaningful variable names that describe the elements they hold. In this case
var accordionQuestions = document.getElementsByClassName('accordion__question'); var accordionCards = document.getElementsByClassName('accordion__card');
- A more common way to hide/show elements is to use
display: none
todisplay: block
. Also create a class that house those styles you're modifying in your JS for better maintainence.
Keep on coding!!
2@Suganya1990Posted almost 4 years ago@artimys thank you so much for taking the time to comb through my code and give me awesome pointers.
Using more meaningful names for my variables is definitely something I am going to focus on my next challenge.
Also 🤦🏾♀️ at display:block... it’s so obvious I don’t know why I didn’t see it. I kept using display:unset
Thank you so much!
1
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