BEM Naming Convention

[ChippyWhips]

I am the first to admit this is not really an 'issue', however I feel it is worth mentioning.

The way Flipster is using the BEM naming convention is incorrect, and nesting has caused problems like the dreaded BEEEM which should be avoided.

Take the following class for example:

.flipster__nav__item--current

From this we can gather that .flipster is our block, .flipster__nav would be our child element, .flipster__item would also be a child element, the modifier --current would be applying to the .flipseter__item child element, giving us .flipster__item--current.

.flipster__item--current does not exist however, instead .flipster__nav__item--current is used.

This would be better if named in the following way:

.flipster__nav-item--current

This would mean that .flipster is our block, .flipster__nav would be our child element, .flipster__nav-item would be another child element, the modifier --current would be applying to the .flipster__nav-item child element.

This would mean writing your styles like this:

.flipster { Code } .flipster__nav { Code } .flipster__nav-item { Code } .flipster__nav-item--current { Code } .flipster__nav-link { Code }

etc. etc.

This would resolve BEEEM class name issues, help me sleep at night, and help keep the Earth spinning in a way that is beneficial to life.

This might require a largish CSS refactor, but to stop baby seals being clubbed, is necessary.

P.s. I love Flipster, I'm not really a horrible person.

[shshaw]

Ha. This is an issue I often have with BEM, trying to nail down parent/child relationships especially when they're nested and dependent.

For instance, .flipster__nav is meaningless without .flipster, and a .flipster__nav__item is dependent on both .flipster and .flipster__nav, since you wouldn't have a nav item without the nav or without the main flipster instance. .flipster__nav-item makes sense on the surface, but doesn't carry the same dependency implication as the former.

For true BEM adherence, wouldn't it be more along the lines of:

<div class="flipster">
  <ul class="flipster__nav flipster-nav">
     <li class="flipster-nav__item"><a class="flipster-nav__link"> ... </a>
     <li class="flipster-nav__item flipster-nav__item--current"><a class="flipster-nav__link"> ... </a>
  </ul>
...

Regardless, BEEEM sounds way cooler if you try to pronounce it. 😉

[drien]

This repository is going into very-low-maintenance mode and declaring backlog bankruptcy