patternhtmlMinor

BEM email structure

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

bemstructureemail

Problem

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?



    
    
        
            
                
            
        
        
            Lorem ipsum dolor.
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, sunt hic perspiciatis consectetur assumenda provident asperiores mollitia excepturi voluptatibus sequi.
            
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, suscipit!
            
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.
        

        
            
                
Stay In Touch With Us:
                
                    
                        
                    
                    
                        
                    
                
            
            
                
&copy;2014 ShowHouse Software
                
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, eligendi vero quos vitae perspiciatis ea?
                

                    
                        View Online
                    
                     | 
                    
                        Unsubscribe

Solution

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.


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

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

tag.

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

this code:

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

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 (` {unordered} or {ordered}) with List Items (

` for both ordered and unordered).

so this:


            ©2014 ShowHouse Software
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, eligendi vero quos vitae perspiciatis ea?
            

                
                    View Online
                
                 | 
                
                    Unsubscribe

should look something more like this


    ©2014 ShowHouse Software
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, eligendi vero quos vitae perspiciatis ea?

    
        
            View Online
        
         | 
        
            Unsubscribe

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

Code Snippets

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

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

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

<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 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>

Context

StackExchange Code Review Q#46287, answer score: 6

Revisions (0)

No revisions yet.