BEM - Forum

Hello, I just started with BEM and really like it. I just have an issue with the following code and hope someone can help me out.

This is my sample code

<nav class="books">
  <ul class="books__lists">
    <li class="books__items"><a href="/"  class="books__links">Sidebar link</a></li>
  </ul>
</nav>

How I am lost to what the link should really be called? Since the li is under the block of books_lists now sure what the link class should be?! I have a design with a lot of different link styles, so is it better to have something like link-books?

Thank you and keep up the good work. Jim.

How does BEM work with Bootstrap´s .container and .row classes? Say if I have a block called .design-news with a background image that spans the entire page and then a .container and .row under that block which would center my content, can I just keep the default classes or does it have to be .design-news__container and .design-news__row?

Which is better:

<article class="news">
  <div class="news__image">image</div>
   <div class="news__details">
     <h1>News title</h1>
     <p>News story</p>
   </div>
</article>

or:

<article class="news">
  <div class="news__image">image</div>
   <div class="news__details">
     <h1 class="news__details-title">News title</h1>
     <p class="news__details-story">News story</p>
   </div>
</article>

Please note: .news__details-title and .news__details-story have no real style as I already have a base style for all my H1s and P tags, so with BEM, can I just add phantom classes to make the markup look more readable? Or go with the first example? Personally I like option 2...

Hello everyone, Just started with BEM and was a bit stuck on how to use it the right way, I have the following code:

<header class="header">
  <div class="header__logo">logo</div>
  <div  class="header__navigation">
    <nav class="header__navigation main-menu">
      <ul class="main-menu">
        <li class="main-menu__list">
          <a href="" class="main-menu__link">link</a>
        </li>
        <li class="main-menu__list">
          <a href="" class="main-menu__link--active">link</a>
        </li>
        <li class="main-menu__list">
          <a href="" class="main-menu__link">link</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Is this the correct use of BEM? As I understand not to nest too deep, so if I wanted to have a new block within an element you can use the mix feature?

Also I wanted to keep .main-menu reusable so I can move the main menu from the header to the sidebar if needed one day.

I hope I got it right :)

Hi there.. i'm just beginning with BEM and love the concept but struggling a bit around with nested blocks. I want to build some kind of responsive teaser with a few elements inside.

This is what my html looks like:

<div class="teaser">

  <div class="teaser__background">
    <picture></picture>
  </div>

  <div class="teaser__featured-product"></div>

  <div class="teaser-content"> <!-- what about this correct naming and its children-elements? -->

    <div class="teaser-titles"> <!--same question here -->
      <p class="teaser-title__overline"></p>
      <h1 class="teaser-title__headline"></h1>
      <h2 class="teaser-title__subline"></h2>
    </div>

    <div class="teaser-content__text">
      <p>Lorem ipsum..</p>
    </div>

    <div class="teaser-content__legal">
      <p>1) Some terms...</p>
    </div>

    <div class="teaser-content__manufacturer-logo"></div>

  </div>

  <div class="teaser__ribbon"></div>

</div>

Inside of teaser I want to keep my content together in one block teaser-content for better positioning. So what would be the correct naming for the teaser-content-wrapper and then the following child-element teaser-titles?

I thought about a bit different version for example:

<div class="teaser-content">

    <!-- <div class="teaser-titles"> --> <!-- maybe we don't need it? -->
      <p class="teaser__title teaser__title--overline"></p>
      <h1 class="teaser__title teaser__title--headline"></h1>
      <h2 class="teaser__title teaser__title--subline"></h2>
    <!-- </div> -->

But questions are still the same. Hope really you can help me because this drives me crazy.

Greetings from the rainy Hamburg (Germany)

AFAIK, somewhere I have seen proof of the following things. Please confirm or disprove.

1) As DOM-tree and BEM-tree aren't required be the same, it's possible that the BEM-element is physically located outside its BEM-block in DOM and it is valid.

<div class="block">
…
</div>
<div class="block__element"> … </div>

2) For the same reason the elements of one block can be nested in another block, making intersection in the DOM-tree like:

.block1
     .block2
         .block1__el
         .block2__el

or even like this:

.block1
     .block2
         .block1__el
             .block2__el

Hi, This is probably very basic question but I'm not sure I saw something about that.

How is best way to move from website design into BEM structure?

I mean, how to fast identify all blocks, find what names should be and build structure efficiently?

Thanks.

Hello!

I'm newbie in BEM and trying to use it in my workflow but I'm not sure how solve that problem.

I would like to create simple layout and position all elements i.e. something like this:

<div class="main-window">
    <div class="gallery">
        <!-- Here is gallery content -->
    </div>
    <div class="story">
        <!-- Here is story content -->
    </div>
</div>

Should I style .gallery and .story with position and dimension properties or maybe should I nest them in .main-window elements. Something like that:

<div class="main-window">
    <div class="main-window__gallery-wrapper>
        <div class="gallery">
            <!-- Here is gallery content -->
        </div>
    </div>
    <div class="main-window__story-wrapper>
        <div class="gallery">
            <!-- Here is story content -->
        </div>
    </div></div>

Now I can separate .gallery and .story styling from their position because I can define size and position with .main-window elements

.main-window__gallery-wrapper {
    width: 500px;
    margin: 0 auto;
}
.gallery {
    /* formatting without size and position */
}
.main-window__story-wrapper {
    width: 500px;
    margin: 30px auto;
}
.story {
    /* formatting without size and position */
}

Sorry for (probably) such a simple question but I didn't find answer for that.

Thanks.

Hi, I'm creating simple input with icon. I have common block for all inputs, named 'input' that is setting padding alongside of another styles, like color, border, etc. For input with icon, I’ve created another block named ‘input-icon’. In order to create space for the icon, I must override left padding in the input when used in ‘input-icon’ block. To do this, I’ve created input modifier ‘input—with-icon’. But now I have tied blocks where if someone uses ‘input-icon’, he must remember to also put ‘input—with-icon’ modifier on the input. Is there any better way? Thanks.

<div class="input-icon">
    <span class="input-icon__icon">X</span>
    <input class="input-icon__input input input--with-icon">
</div>

.input {
    padding: 7px 7px;
    /*..*/
}
.input--with-icon {
    padding-left: 30px;
}
.input-icon {
    position: relative;
}
.input-icon__icon {
    position: absolute;
    z-index: 1;
    left: 7px;
    /* .. */
}

Hello, I'm new to BEM and I want to get opinion on something, so lets say I have blog post, in blog post we have title, badge, summary, figure ... below is the example of my html

    <div class="post">
        <h1 class="post__title">This is title</h1> 
        <summary class="post__summary">
            Some text here
        </summary>
        <figure class="post__figure figure">
            <img class="figure__image" src="">  
            <figcaption class="figure__caption">Some text</div> 
        </figure>
    </div>

So should I do .post_figure and then inside .post__figure__image and .post__figure__caption or should i create new block like in example?

Hi there,

I have a navigation list, each items will need unique styling such as an icon/image applied to it. I've seen this handled a couple of different ways so I thought I'd put it to the forum and gets peoples thoughts on it. The standard mark-up would be something like this:

<nav class="site-nav">
    <ul class="site-nav__list">
        <li class="site-nav__item"><a href="#" class="site-nav__link">Schools</a></li>
        <li class="site-nav__item"><a href="#" class="site-nav__link">Users</a></li>
    </ul>
</nav>

Originally I thought I'd use a modifier and add classes like site-nav__item--users for example. But quite a few sites I've looked at use an element instead, so site-nav__users. So in full...

<nav class="site-nav">
    <ul class="site-nav__list">
        <li class="site-nav__item site-nav__schools"><a href="#" class="site-nav__link">Schools</a></li>
        <li class="site-nav__item site-nav__users"><a href="#" class="site-nav__link">Users</a></li>
    </ul>
</nav>

What's the thinking behind this and is there a right/wrong answer? Thanks in advance!

Hi all again! :)

I don't know if this is strcit a BEM question. Can I reuse just some parts of blocks?. Is a copy+paste thing and I think it's not a good idea.. :S

With this block

<div class="newsletter">
    <div class="newsletter__title">Newsletter</div>
    <div class="newsletter__subtitle">This is the newsletter subtitle</div>
</div>

Can I use just this in other parts of the interface:

<div class="newsletter">
    <div class="newsletter__title">Newsletter</div>
</div>

Or I need to create for example a modifier like newsletter--no-subtitle and hide it

<div class="newsletter newsletter--no-subtitle">
    <div class="newsletter__title">Newsletter</div>
    <div class="newsletter__subtitle">This is the newsletter subtitle</div>
</div>

Thanks you!!

Hi all! here I go again :) In the code below, how I should name the #### div?

I don't want to name it header__title because it doesn't reflect very well the DOM relation, and since BEM doesn't recommend nesting elements (And I don't really like too) it can't be header__rrss__title

So sorry for this silly question, I read all documentation FAQ's and I can't find any solutions :S

Thanks in advance,

<div class="header">
  <div class="header__logo logo">
    <div class="logo__foo"></div>
  </div>
  <div class="header__rrss">    
    <p class="####"></p>  
    <div class="rrss-icons">
      <div class="rrss-icons__title"></div>
    </div>
  </div>
</div>

Hello I am going through the quickstart tutorial. One of the first things I noticed on getting it running is that the HTML generated is all on one line. I am looking for a way to have it display in a readable way. I have looked at enb-borschik>techs>borschik.js and have tried commenting out: line 69: .defineOption('minify', true) line 85: minimize: this._minify, and restarted the server, but still seeing it compressed to one line. please let me know what to change to fix this. Thank You

Before (attempting) to use BEM, I'd mark my forms up something like this:

<form> 

    <h3 class="title">Form Heading <small>(if small tag is added)</small></h3>
    <p>Short paragraph of text...</p>

    <div class="form-group">
        <label class="label">Username <em>*</em></label>
        <div class="form-controls">
            <input type="text" />
        </div>
    </div>
    <div class="form-group error">
        <label class="label">Email address <em>*</em></label>
        <div class="form-controls">
            <input type="text" />
        </div>
    </div>
    <div class="form-group">
        <label class="label">Label</label>
        <div class="form-controls">
            <input type="text"  placeholder="" />
        </div>
    </div>
    <div class="form-group">
        <label class="label">Label</label>
        <div class="form-controls">
            <label class="radio"><input type="radio" name="radio" checked="checked" /> Option One</label>
            <label class="radio"><input type="radio" name="radio" /> Option Two</label>
        </div>
    </div>

</form>

It seems, obvious to use form__group instead of form-group and form__controls instead of form-controls. Using elements like this, the form would NEED a class of form on it - otherwise it makes no sense? Seems a bit strange on a default element though, I've not used <ul class="list"> for example, just <ul class="list--bordered"> for example.

I've created some quick, updated mark-up below, would this be acceptable?

<form class="form"> 

    <h3 class="form__title">Form Heading <small>(if small tag is added)</small></h3>
    <p>Short paragraph of text...</p>

    <div class="form__group">
        <label class="form__group-title">Username <em>*</em></label>
        <div class="form__controls">
            <input type="text" />
        </div>
    </div>
    <div class="form__group error">
        <label class="form__group-title">Email address <em>*</em></label>
        <div class="form__controls">
            <input type="text" />
        </div>
    </div>
    <div class="form__group">
        <label class="form__group-title">Label</label>
        <div class="form__controls">
            <input type="text"  placeholder="" />
        </div>
    </div>
    <div class="form__group">
        <label class="form__group-title">Label</label>
        <div class="form__controls">
            <label class="form__radio"><input type="radio" name="radio" checked="checked" /> Option One</label>
            <label class="form__radio"><input type="radio" name="radio" /> Option Two</label>
        </div>
    </div>

</form>

Thanks again!

Hi,

I have a big disscusson with my colleague and would love to get your feedback.

I am building a website and have seen some areas, wich are reusable. They share the same HTML construct and looks similar. Example:

<header>
    <nav class="navigation navigation_main">
        <ul class="navigation__list">
            <li class="navigation__item"><a class="navigation__link">Item 1</a></li>
            <li class="navigation__item"><a class="navigation__link">Item 2</a></li>
            <li class="navigation__item"><a class="navigation__link">Item 3</a></li>
        </ul>
        </nav>
        <nav class="navigation navigation_meta">
            <ul class="navigation__list">
                <li class="navigation__item"><a class="navigation__link"><span class="svg-icon svg-icon_search"></span></a></li>
                <li class="navigation__item navigation__item_active"><a class="navigation__link">DE</a></li>
                <li class="navigation__item"><a class="navigation__link">EN</a></li>
            </ul>
    </nav>
</header>

My colleague says, that the navigations have to be named different:

<header>
    <nav class="main-navigation">
        <ul class="main-navigation__list">
            <li class="main-navigation__item"><a class="main-navigation__link">Item 1</a></li>
            <li class="main-navigation__item"><a class="main-navigation__link">Item 2</a></li>
            <li class="main-navigation__item"><a class="main-navigation__link">Item 3</a></li>
        </ul>
    </nav>
    <nav class="meta-navigation">
        <ul class="meta-navigation__list">
            <li class="meta-navigation__item"><a class="meta-navigation__link"><span class="svg-icon svg-icon_search"></span></a></li>
            <li class="meta-navigation__item meta-navigation__item_active"><a class="meta-navigation__link">DE</a></li>
            <li class="meta-navigation__item"><a class="meta-navigation__link">EN</a></li>
        </ul>
    </nav>
</header>

The navigations (there are some additional navigation in the footer and for social media icons, too) looks very similar. They differ in font size and paddings/margins. I see great advance in the first solution, because it is very modular and reusable. The end code is smaller. My colleague says, nesting (i.e. .navigation_meta .navigation__item{}) is evil and should be avoided, whenever possible (i.e .meta-navigation__item{}).

Who is right?

I was wondering why you chose to define an element entirely using classes in the HTML instead of breaking shared functionality into placeholders / mixins (to use Sass as an example). Is it because you don't use a preprocessor?

If we take the example of a list, it might look like:

<ul class="ui-list horizontal-list resource-list gallery-list"></ul>

In this situation, why is this better than a single class:

<ul class="gallery-list"></ul>

With that class composed from placeholders:

.gallery-list {
  @extend %ui-list;
  @extend %horizontal-list;
  @extend %resource-list;

  // Gallery List specific styles
}

Do you see this as potentially beneficial?

What is the correct way of naming items in a list when the item itself has subcomponents. Is it the case that the item should be classed both as a child block of the list and as its own component? Is the following example correct?

<div class="news-feed">
  <h3 class="news-feed__title">…</h3>
  <ul class="news-feed__list">
     <li class="news-feed__list-item news-feed-list-item">
        <h4 class="news-feed-list-item__title">…</h4>
        <img class="news-feed-list-item__thumbnail">
     </li>
  <ul>
</div>

Links under list items

Bootstrap container and row class

Should I give all elements a class name?

Correct use of Mix?

Struggling with correct BEM naming on third level

bem-element outside the bem-block and block-elements intersection in DOM tree

How to change website design into BEM?

BEM and blocks size

Blocks dependency (modifier)

Nested elements or new block?

unique classes on list-items - element or modifier?

Using just some parts of a block

How to avoid nesting elements

Configuration to have html not minified in tools

Updated BEM form mark-up,

Different blocks or modified blocks?

Multiple Classes vs Mixins

Naming of List Items