@sinjin25
Posted
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
@Unal-Inanli
Posted
@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)
