Intro with sign up - using BEM, CSS, JavaScript

Community feedback

• 

  Gerben Dol•3,115

  @GerbenDolPosted almost 4 years ago

  Hey Leon, cool to see you're learning to use BEM! 💪🏻

  I've looked at your code and noticed you're not using the -- part in BEM correctly yet.

  For example: <div class="card__offer"><p class="card__offer--text"><span>Try it free 7 days</span> then $20/mo. thereafter</p></div>

  So .card__offer suggests that this is in an element in .card which it is not. So, maybe change this to be the block and call it .card. The text (honestly, I'm not sure you even need a class on this paragraph as you'll probably style all text the same in here) could become .card__text.

  Only use the -- in your class if it is a modifier on an already existing element. For example, let's say this case of the .card__text is special since it is highlighted. You want all the styling .card__text already has, but with a modification on it's background-color. You'd make it like <p class="card__text card__text--highlight"> to use the basic styles and apply the modifier.

  Be sure to check out some articles diving into what all the ideas behind BEM are to avoid making these mistakes. Hit me up on Slack if you need some more help! I'm on there using the same name as I am here. 🙌🏻

  2

  ---

  

  Leon•180

  @leon-bwPosted almost 4 years ago

  @GerbenDol Hey Gerben, thanks for your feedback. I was actually a bit confused about the modifier when reading through the documentation on BEM so thanks for clearing that up for me. I'll be sure to go through my HTML again and make these corrections. Thanks again for your feedback!

  Happy coding! 😊

  1