0

I'm working on my first project using BEM. I'm loving it but there's just one thing I can't my head around: nesting solutions for larger modules. I have search a lot about this and there are many topics on stackoverflow, but the examples are all to obvious. In the 'real' world not everything can be seen as seperate modules.

For example: I'm building a big timeline module. It consists of a timeline bar, which contains bullets and labels. Each bullet has an article block which itself consist of an image, a title, subtitle and a link.

The BEM code seams very inefficient to 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 I understand that I can split this in different sub-modules. Like this:

timeline
timeline__bar
timeline__bullet
timeline__label-year
timeline__label-month
timeline__article  article

article__image
article__title
article__subtitle
article__link

But this is only relevant when the article is its own 'thingy'. But in my case this is a specific timeline-only article. And the name 'article' is way too generic.

I could also do it like 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 this doesn't feel right either, since the naming seams so confusing. What is the best practice is this case?

Many thanks.

albert105
  • 119
  • 1
  • 2
  • 8
  • This question is either too broad, **opinion based** or requires discussion and so is off-topic for Stack Overflow. If you have a specific, answerable, programming issue, please provide full details. – Paulie_D Apr 19 '16 at 09:55

2 Answers2

0

In BEM, there really shoudn't be something like a "large module". You should split your modules into smaller bits, so they could be reused somewhere else. Your example with using article and timeline separately is good.

The hard part with BEM is actually naming things. While article is generic, timeline-article may be better, but it's long. You either figure something better or just go with the long one.

Or, you can try using modificators. If your article in timeline is slightly different from article inside, let's say, blogpost, they try it: http://getbem.com/faq/#block-modifier-affects-elements

I had the same problem when I was learning BEM. Unfortunately, most examples have simple blocks like page-header or block.

Tomek Buszewski
  • 7,659
  • 14
  • 67
  • 112
0

You can always break the module into smaller pieces using @import if you feel it is becoming too cumbersome to deal with. For example, and for good reference, check out Chris Coyier's Codepen's CSS post.

As for the preferable naming convention out of your choices, I would go with the second one (i.e, with timeline__ and article__), but you simply have to play it by ear for what works for you.

Addressing the efficiency concern, are you using BEM with SASS pseudo-nesting? This would make writing out the BEM nomenclature much easier.

Speaking of structuring CSS, I also suggest checking out Harry Robert's ITCSS.

Absorbing what the above few links offered made me love writing CSS...

timolawl
  • 5,434
  • 13
  • 29
  • How do you combine BEM with SASS nesting? Since BEM is sort-of anti-nesting.. In all the BEM examples it says: nav, nav__list, nav__item, nav__link, instead of nav > ul > li > a – albert105 Apr 19 '16 at 10:09
  • It's not actual nesting, but it makes spelling BEM names like `timeline__article__image--gray` a lot easier. Example: `.block { &__element { background: green; } }` would compile into CSS as `.block__element { background: green; }`. – timolawl Apr 19 '16 at 10:13
  • Ohh ok, yeah I already use that. Works great. One more question: How can I make a element dependent on its block modifiers? So when I have: block block--left and block block--right which have a block__element inside, can I use the block modifiers also for the elements? Or do I have to give each element its own modifiers (block__element--left)? – albert105 Apr 19 '16 at 10:26
  • You can do whatever you want. `.Block__element--modifier`, `.element--modifier`, `.Block--modifier`. – timolawl Apr 19 '16 at 10:30
  • Also, welcome to SO, and be sure to follow guidelines on how to conduct yourself while you're here! http://stackoverflow.com/help/someone-answers – timolawl Apr 19 '16 at 10:31