FAQ Challenge with Vanilla HTML CSS AND JS

Community feedback

• 

  Arturo Simon•1,785

  @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.

  1. example of using block__element--modifier.

  card__content--background would add/modify any styles that class card__content contains

  <div class="card">
       <div class="card__content card__content--background">
  

  2. example of using block--modifier (not sure if proper but I've seen it around). card--dark-theme adds/modifies the card class styles

  <div class="card card--dark-theme">
       <div class="card__content">
  

  3. 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 to display: block. Also create a class that house those styles you're modifying in your JS for better maintainence.

  Keep on coding!!

  2

  ---

  

  Suganya Maheswaran•45

  @Suganya1990Posted about 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