BEM email structure

Question

I have started using BEM syntax for my HTML and CSS. I got the idea from Harry Roberts' blog post "MindBEMding – getting your head 'round BEM syntax".

Please note I am not looking to use this for HTML email, it is just an example. Am I going too low in my element structures?

<div class="wrapper">

    <!-- EMAIL ONE -->
    <div class="email_template">
        <div class="email_template__head--one">
            <div class="email_template__logo">
                <img src="logo.png" alt="">
            </div>
        </div>
        <div class="email_template__main">
            <h1>Lorem ipsum dolor.</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, sunt hic perspiciatis consectetur assumenda provident asperiores mollitia excepturi voluptatibus sequi.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, suscipit!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, ea, maiores corporis quasi quos et obcaecati! At, adipisci, eligendi, dolor sapiente magni accusamus ducimus quos aperiam exercitationem dignissimos quibusdam cum blanditiis rerum iste perferendis perspiciatis ratione ullam necessitatibus reprehenderit ex nam cumque atque voluptas? Ab reprehenderit labore repellendus sapiente atque.</p>
        </div>

        <div class="email_template__foot">
            <div class="email_template__foot__social">
                <p>Stay In Touch With Us:</p>
                <div class="email_template__foot__social__logo">
                    <div class="email_template__foot__social__item">
                        <a href="#"><img src="facebook.png" alt=""></a>
                    </div>
                    <div class="email_template__foot__social__item">
                        <a href="#"><img src="twitter.png" alt=""></a>
                    </div>
                </div>
            </div>
            <div class="email_template__foot__content">
                <p>&copy;2014 ShowHouse Software</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, eligendi vero quos vitae perspiciatis ea?</p>
                <div class="email_template__foot__content__links--one">

                    <div class="email_template__foot__content__links__item">
                        <a href="#">View Online</a>
                    </div>
                    <div class="email_template__foot__content__links__item"> | </div>
                    <div class="email_template__foot__content__links__item">
                        <a href="#">Unsubscribe</a>
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!-- EMAIL ONE -->

</div>

Answer 1

You could improve your BEM structure by not being so strict.

A class name like email_template__foot__content__links__item is a pain to read and, in my opinion, makes BEM redundant. You don't have to go too deep. Just three levels deep should be fine, but deeper than that is too hard to read. I suggest organising your BEM like the following:

<div class="email-template">
  <div class="et-head">
    <img class="et-head__logo" src="">
  </div>
  <div class="et-main">
    ...
  </div>
  <div class="et-foot">
    <div class="et-foot__social">
      <div class="et-foot__social--logo">
        ...
      </div>
     </div>
  </div>
</div>

and so on. It's not against BEM to come up with a complete new class name for the footer or any other element and name the children after it.

Answer 2

Something minor that irritates me and may or may not irritate others, is your lack of newlines inside your p tags. Within these tags you can multi line and it won't be translated to your browser output.

<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
    Laboriosam, sunt hic perspiciatis consectetur assumenda 
    provident asperiores mollitia excepturi voluptatibus sequi.
</p>

When I started writing HTML this is how I would structure most of my code, it looked pretty to me and I could easily see everything clearly.

As long as you are styling you can make the block of text inside the p tag do whatever you want. you can make it wrap or not wrap or whatever.

When you want an explicit new line then you use a <br /> tag.

You can even insert an img tag inside of a p block as well.

---

this code:

        <div class="email_template__logo">
            <img src="logo.png" alt="">
        </div>

could be better written using a class attribute inside of the img tag like this

 <img src="logo.png" alt="" class="email_template__logo" />

Where a div and a img tag differ you will be able to find a better way with the img tag because it is meant to be styled for images.

---

Something else that I noticed is that you have what looks like an item list in your footer code, but you aren't using Lists (<ul> {unordered} or <ol> {ordered}) with List Items (<li> for both ordered and unordered).

so this:

        <div class="email_template__foot__content">
            <p>&copy;2014 ShowHouse Software</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, eligendi vero quos vitae perspiciatis ea?</p>
            <div class="email_template__foot__content__links--one">

                <div class="email_template__foot__content__links__item">
                    <a href="#">View Online</a>
                </div>
                <div class="email_template__foot__content__links__item"> | </div>
                <div class="email_template__foot__content__links__item">
                    <a href="#">Unsubscribe</a>
                </div>

            </div>
        </div>

should look something more like this

<div class="email_template__foot__content">
    <p>&copy;2014 ShowHouse Software</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, eligendi vero quos vitae perspiciatis ea?</p>

    <ul class="email_template__foot__content__links--one">
        <li class="email_template__foot__content__links__item">
            <a href="#">View Online</a>
        </li>
        <li class="email_template__foot__content__links__item"> | </li>
        <li class="email_template__foot__content__links__item">
            <a href="#">Unsubscribe</a>
        </li>
    </ul>
</div>

with this line of code being removed and replaced with styling to separate the list items

<li class="email_template__foot__content__links__item"> | </li>

Answer 3

One of the most fundamentally useful things about BEM is the flattening of modules to make them independent of structure.

It's always a problem in css to make the selectors follow the HTML structure, which is why flattening down the selectors from a css perspective is a good thing. It makes it easier to re-use on other HTML and easier to change the HTML without affecting the css.

Take this class here: email_template__foot__content__links__item - although the styles will likely only apply to the list item, the entire structure that gets there is baked into the class name. This is less pernicious than the corresponding .email footer .content ul li that would tightly tie the selector to the HTML, but it's still unnecessary.

My rule of thumb is that I never use the __ more than once in class names. If you do that, you probably have another module that should be broken out to be re-usable.

Again, looking at the footer example, you would find that this is much more modular and easier to re-use, as well as having class names that will mean something if they're moved into another context, such as if you want to use a list in the email body. You also clean the class names up massively.

.footer
.footer__content

.list
.list__item

You can then do the following to style the list in some way you might want to seen as it's in the footer:

.footer .list
// or
.footer__list // applied to the same element as `.list` 

Note above that the BEM class for the footer list doesn't use an intermediary __content clip. You shouldn't have the class .footer__content__list

A final small thing: .email_footer should probably be .email-footer - in BEM the underscore is only used for de-marking block from element, not as a word spacer - use the hyphen for this.