Fylo data storage component solution

Community feedback

• 

  Jon Wright•160

  @Dr-Wrong-MoPosted over 2 years ago

  Your project looks very nice. To your question about BEM:

  I would give your classes names that are more descriptive.

  Instead of firstDiv, I would name it something like .tool-container.

  Then .tool-container__title and .tool-container__icon.

  Instead of secondDiv, I might name it .storage-meter.

  Then .storage-meter__range. And the children of that would be:

  .storage-meter__range--meter .storage-meter__range--amount

  This allows for easier nesting when you use SCSS.

  Your SCSS would look like this:

  .storage-meter { property: value;

  &__range {
      property: value;
  
      &--meter {
          property: value;
      }
  
      &--amount {
          property: value;
      }
  

  } }

  If you haven't used SCSS before, you can nest your child elements inside their parents. The ampersand symbol (&) extends the parent selector you are nested inside of. I'd recommend learning SCSS. The basics aren't all that difficult, but it can help you separate your code when you are working on a large project. You split different pages, utility functions and such into their own files, then import those files into your main SCSS file.

  Marked as helpful

  0