The css BEM concept

Question

I am trying to get around the Block-Element-Modifier concept of the CSS and I am a bit confused. Here is a sample code

<div class="block">
    <div class="block-header">
        <h3>Block Title</h3>
    </div>
    <div class="block-content">
        <p>Lorem Ipsum</p>
    </div>
    <div class="block-footer">
        <p>Footer</p>
    </div>
</div>

My understanding is that classes .block, .block-header, .block-content, and .block-footer are the BLOCKS of the BEM concept (correct me if it is not) but then what is <h3> and <p> a block or an element?

it just hit me so editing the question,

If both <h3> and <p> are Blocks (in case if it is) what probably can be the elements to these two tags?

EDITed again

Here is block of code in html

<div class="block">
    <div class="block-content">
        <div class="user-image"> <img class="user-image__image" src="image/1.jpg" alt=""> </div>
        <div class="user-meta">
            <h3 class="user-meta__username user-meta__username-red"> Trump </h3>
        </div>
        <ul class="nav">
            <li class="nav__item nav__item_active"><a class="nav__link">One</a></li>
            <li class="nav__item"><a class="nav__link">Two</a></li>
            <li class="nav__item"><a class="nav__link">Three</a></li>
        </ul>
    </div>
</div>

Can you please go through the above code and let me know if this is what is correct,

1. .block, .block-content, .block-image, .user-meta and .navare BLOCKS of the BEM

2. user-meta__username and nav__item are the Elements of the BEM.

3. user-meta__username-red is the Modifier of the BEM.

Answer 1

First of all naming and structure is a personal thing. Although BEM concept is quite clear. It's a guideline, not a law.

Block: How many blocks, element or modifiers you have depends on how much you like to reuse your own code. The number of blocks (repeating elements) can be as big or small as what you desire in your own project. My own guidelines are that I only use a block when I know the situation will be repeated.

CSS guidelines for blocks:

1. Use class name selector only
2. No tag name or ids No dependency on
3. other blocks/elements on a page

Element: The element part of BEM is the block it's "static" content. This can be non-repeated elements like single use heading styles, list styles, graphical elements etc. You never mix an other blocks elements inside it's own block. Example:

GOOD:

<div class="logo"> <img src="/" class="logo__image"> </div>

BAD:

<div class="logo"> <img src="/" class="branding__logo"> </div>

CSS guidelines for elements

1. Use class name selector only
2. No tag name or ids
3. No dependency on other blocks/elements on a page

Modifier: Modifiers can be used on blocks and elements depending on how much you want to change the layout when an action happens. This can be highlighting something to completely change the designs look. Or just hide stuff.

CSS guidelines for modifiers

1. To alter elements based on a block-level modifier
2. To alter elements based on a element modifier

More about BEM can be found here: http://getbem.com/

Example of your code:

<!-- Begin block: topbar -->
<div class="topbar">
  <div class="topbar__content">
    
    <!-- Begin block: user -->
    <div class="user">
      <img class="user__image" src="image/1.jpg" alt="">
      <div class="user__meta">
        <h3 class="user__username user__username--red"> Trump </h3>
      </div>
    </div>

    <!-- Begin block: nav -->
    <ul class="nav">
      <li class="nav__item nav__item--active"><a class="nav__link">One</a></li>
      <li class="nav__item"><a class="nav__link">Two</a></li>
      <li class="nav__item"><a class="nav__link">Three</a></li>
    </ul>
    
  </div>
</div>

Answer 2

BEM Follows a naming convention of block__element--modifier Giving an example

<ul class="menu">
  <li class="menu__item menu__item--active"></li>
  <li class="menu__item"></li>
  <li class="menu__item"></li>
  <li class="menu__item"></li>
</ul>

Block - menu, Element - menu__item, Modifier - menu__item--active