Interactive Card Details Form with SASS and little REGEX

Community feedback

• 

  Kyrylo Haiduk•420

  @superpooperxxx

  Posted about 2 years ago

  Hi, awesome job🔥 Going to study, how you implemented validation

  • I believe you can make it with css background-image, without unnecessary <div>

  ❌
  <div class="background-image"></div>
  

  • Also, implement this with pseudo-element ::before/::after. This will look more professional, they were created for decorative stuff.

  ❌
  <div class="card__front--circles">
    <span aria-hidden="true" class="circle circle__big"></span>
    <span aria-hidden="true" class="circle circle__small"></span>
  </div>
  

  • Speaking of BEM.
  • First of all, would be more correct to have 2 separate blocks .front-card and .back-card as they are logically separate components
  • Also you have misunderstanding of modifiers

  ❌
  <div class="card__front--text">
  ✅
  <div class="front-card__text">
  

  Modifier is usually an adjective (what size? what color?) or Boolean value

  ❌
  <span aria-hidden="true" class="circle circle__small"></span>
  ✅
  <span aria-hidden="true" class="circle circle--small"></span>
  

  Happy coding❤️ Hope this was helpful

  10

  Marked as helpful