html - How to deal with BEM in large modules? -

i'm working on first project using bem. i'm loving there's 1 thing can't head around: nesting solutions larger modules. have search lot , there many topics on stackoverflow, examples obvious. in 'real' world not can seen seperate modules.

for example: i'm building big timeline module. consists of timeline bar, contains bullets , labels. each bullet has article block consist of image, title, subtitle , link.

the bem code seams inefficient me:

timeline timeline__bar timeline__bullet timeline__label-year timeline__label-month timeline__article timeline__article-image timeline__article-title timeline__article-subtitle timeline__article-link 

now understand can split in different sub-modules. this:

timeline timeline__bar timeline__bullet timeline__label-year timeline__label-month timeline__article  article  article__image article__title article__subtitle article__link 

but relevant when article own 'thingy'. in case specific timeline-only article. , name 'article' way generic.

i this:

timeline timeline__bar timeline__bullet timeline__label-year timeline__label-month timeline__article  timeline-article  timeline-article__image timeline-article__title timeline-article__subtitle timeline-article__link 

but doesn't feel right either, since naming seams confusing. best practice case?

many thanks.

in bem, there shoudn't "large module". should split modules smaller bits, reused somewhere else. example using article , timeline separately good.

the hard part bem naming things. while article generic, timeline-article may better, it's long. either figure better or go long one.

or, can try using modificators. if article in timeline different article inside, let's say, blogpost, try it: http://getbem.com/faq/#block-modifier-affects-elements

i had same problem when learning bem. unfortunately, examples have simple blocks page-header or block.