Expense Chart Component Vanilla JS CSS HTML Flexbox

Community feedback

• 

  raionus•310

  @sinjin25Posted about 2 years ago

  I also find BEM naming to be kind of tedious (still useful though). If you're running out of brain power for names maybe you could try double modules?

  ex: instead of expense-component__balance-title and expense-component__balance-amount

  expense-component__balance__ and then you'd have the submodules title and amount. Maybe then you could be undescriptive while still being confident you avoid a naming collision?

  I noticed you're not using sass. If you're using BEM it can make it far less horrible through nesting. Instead of writing out the full module for everything:

  .expense-component__ {
      &balance-amount {}
      &balance-title{}
      &stats-container {}
      &stats-end {}
  }
  

  etc.

  Marked as helpful

  1

  ---

  

  SpartanUI•245

  @Unal-InanliPosted about 2 years ago

  @sinjin25 Cheers for the quick response. The sub-module approach might be a good way to go specifically for these one and done component kind of projects, but it might get messy and hard to read in bigger projects.

  I guess composing a single block / component from multiple blocks would be also something to consider. E.g. the <h1> parts in the markup would have a "text__heading--1" kind of class.

  Regardless thanks again and the experimentation never stops.

  (P.S. i do use sass i was just lazy to set it up)

  1