Question about BEM naming approach

I really suck at naming…
Here is what I have

<nav class="primary-nav">
// Do I call it like this? or just search-form?  
<form class="primary-nav-search-form">
// Do I just call it input container? form-input-container or the other name that I gave it?
<div class="primary-nav-search-form-input-container">
<input/>
</div>
</form>
</nav>

Following BEM standards, how can I call these classes better? I’ll appreciate any advise regarding BEM naming.

Or If I have

<div class="input-container">
<input="input"/>
</div>

How would I call input in this case? just naming it input feels wrong…

Hello @happyworld,

Considering primary-nav is a block I would use underscore instead of a hyphen.

<nav class="primary-nav">

<form class="primary-nav__search-form">

<div class="primary-nav__search-form__input-container">

But if the input-container is used outside of this block. it’s better to giving it a class like below so that, it can be reused throughout the page.

<div class="primary-nav__search-form input-container">

Please refer to this page for documentation: http://getbem.com/naming/

Thanks.

@thinkingape46
I tried this way, is it wrong?

<form class="primary-nav-search-form">
      <div class="input-container">
        <input
          class=input-field 
          type="text"
          placeholder="Search"
        />
      </div>
        <div class="input-btn-container">
          <button class="input-btn">
            <span>
              //searchIcon
            </span>
          </button>
          <button class="input-btn">
            <span>
              //close icon
            </span>
          </button>
        </div>
    </form>

I have a few buttons, a close button and a submit button? Following your answer, it should be something like primary-nav__search-form__input-container__input-btn but it feels so weird writing so much for one class.

I think the button may be used somewhere else in the page.

In that case, a class like btn or input-btn is helpful.

If you use the class the primary-nav__search-form__input-container__input-btn, it cannot be re-used and also it’s too long.

@thinkingape46
And what about the input-field class? Considering I won’t be reusing this class anywhere, can I just leave the name as is? or do I have to add all the primary-nav stuff? same with input-btn-container.

Or wait, if someone else is gonna be reading this code then they’d assume that input-btn-container is a reusable class, right? while If I had the primary-nav__search-form prefix, it’d have been considered as a standalone class?

Then I also have a blog section

<section class="blog-section">
//iterate through blogs
<article class="blog-container">
<h3 class="blog-container__title">title</h3>
<p class="blog-container__body">title</p>
<div class="blog-container__footer">title</div>
 </article>
</section>

How is my naming now? What about blog-section which is a parent to all blogs and blog-container which is one blog itself? Should I instead make a section a blog-container and an article a blog-article ?

and then I have

<div class="blog-container__author-container">
              <span>By</span>
              <a href="#" class="blog-container__author">
               author
              </a>
</div>

Is it ok that I have an author container that has more characters than its child (author)? shouldn’t it be the other way around, or does it even matter?