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?