3

I just wanted to know whether the following code follows BEM methodology best practices? Creating an element for the block modifier i.e. in this case "block--mod" is a modifier for the "block" block. Is it allowed to create a nested element with this pattern: "block--mod__elm". 

<div class="block block--mod">
   <div class="block__elm block--mod__elm">
</div>
Amit Kumar
  • 301
  • 2
  • 13
  • 2
    You might consider changing "is valid" in your question to "follows BEM methodology best practices". The markup is valid - it will pass an HTML and CSS validation tests. – Jonathan Nicol Nov 16 '17 at 21:14
  • oh, that makes sense! Thanks, I have updated the question. :) – Amit Kumar Nov 17 '17 at 04:23

2 Answers2

5

In situations like theming or similar I would use nested selectors. This saves some classes in your HTML and as @Jonathan Nicol said those sub-elements can be hard to follow. Also it will be easier to remove the "branding" later, just remove block class instead of all it's elements.

For example Xmas branding of your header.

.header--xmas .header__logo {
    /* Jingle bells, jingle bells, jingle all the way.*/
}

Source: http://getbem.com/faq/#can-a-block-modifier-affect-elements-

Nikolay Mihaylov
  • 3,868
  • 8
  • 27
  • 32
  • 1
    This unnecessarily increases specificity and will cause problems with recursive nesting. While most modules won't run into issues most of the time, it can be difficult to fix after the fact if you eventually run into that sort of situation. – zzzzBov Nov 29 '17 at 15:09
  • @zzzzBov you have a point. What will be the better solution? Perhaps add modifier to every element? `.header__logo_theme_xmas` and so on? – Nikolay Mihaylov Dec 05 '17 at 10:35
  • @NikolayMihaylov: Xmas branding should be added as a `.block`, otherwise, `.block--modifier` or `.block__element`/`.block__element--modifier` (if semantically tied to a `.block`), so as to keep CSS specificity in check. Consider it as an independent utility with a specific and rigid purpose which should not be overwritten nor overly used. – nyedidikeke Sep 15 '19 at 19:27
3

I could not find an example of a the .block--mod__elem pattern in Yandex's BEM documentation (Yandex devised the BEM methodology), but an early article about BEM on CSS Wizardry does show an example of a modifier with a sub-element, .person--female__hand:

.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}

Source: MindBEMding – getting your head ’round BEM syntax

Modifiers with sub-elements can be a little hard to follow, but I do not shy away using from them if it seems like the logical approach.

Edit: @NikolayMihaylov's answer gives an alternative approach that I wholeheartedly support. It is more readable and more maintainable.

Jonathan Nicol
  • 3,158
  • 1
  • 21
  • 22
  • The reference you are looking for is here: https://en.bem.info/methodology/naming-convention/. The "block-modifier-name" rule combined with the "Two Dashes style" naming schemes (both on the linked page) would allow for `.block--modifier`. To quote the docs: "The value of a modifier is separated from its name by a double hyphen (--)." – Potherca Feb 22 '19 at 15:48
  • @Potherca The question is not about `.block--modifier` though, it is about `.block--modifer__element`. I don't think Yandex's documentation mentions the possibility of an element appearing after a modifier, although it doesn't say that is it is not possible, either. I think the OP asked the question to clear up this ambiguity. – Jonathan Nicol Feb 23 '19 at 20:15