7
\$\begingroup\$

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>
\$\endgroup\$
  • \$\begingroup\$ Where is the CSS? is this Live code? \$\endgroup\$ – Malachi Apr 4 '14 at 16:15
  • 1
    \$\begingroup\$ could you please clarify the meaning of "element structure", there's currently a discussion in Code Review Chat about wether this question should be tagged with css. I believe you talk about the BEM-element structure, while others believe, you are talking about the HTML-element structure... \$\endgroup\$ – Vogel612 Apr 4 '14 at 16:30
6
\$\begingroup\$

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.

\$\endgroup\$
  • \$\begingroup\$ I still don't understand the need for all those DIVs...?? \$\endgroup\$ – Malachi Apr 4 '14 at 19:48
  • \$\begingroup\$ I suppose because it's a HTML email ;) HTML5 elements wont work in most email clients, so divs or in worst case table \$\endgroup\$ – morkro Apr 4 '14 at 19:48
  • \$\begingroup\$ what about plain HTML, like img, p, ul, li, and yes table for the data layout. none of those are HTML5 tags, and to top things off we are talking about CSS, why would it be able to use CSS and not HTML5? \$\endgroup\$ – Malachi Apr 4 '14 at 20:24
  • \$\begingroup\$ point is, there are too many div's in OP's code and in your code. \$\endgroup\$ – Malachi Apr 4 '14 at 20:25
  • \$\begingroup\$ Yeah I agree with the div's. I was thinking of <header>, <footer>, <section< elements while talking about the HTML5 part. (anyway, he allready said at the beginning that he won't use the code for a html email) But in generell the initial question wasn't "do I use too many div's". He just wanted to know if his BEM structure is correct and if he can improve it. I just followed his given example. \$\endgroup\$ – morkro Apr 4 '14 at 20:34
6
\$\begingroup\$

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>
\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.