is this how to structure bem?

Question

I have a loading overlay/page and this is how I structured it via BEM. I get a bit confused how it should be nested:

<div id="js-load-page" class="load">

        <div class="wrapper">
            <div class="u-full-height u-center-inner">
                <div id="js-welcome" class="welcome">
                    <p id="js-welcome-text-set-1" class="welcome__sub-heading type-color--green">
                        text text text
                    </p>
                    <h1 id="js-welcome-text-set-2" class="welcome__heading">
                        Where text text
                    </h1>
                    <h1 id="js-welcome-text-set-3" class="welcome__heading">
                        Let our expertise be your success.
                    </h1>
                    <a href="#" id="js-welcome-cta" class="cta">
                        discover
                        <div></div>
                    </a>
                </div>
            </div>
        </div>
    </div>

And this is my landing page:

<div class="land">
        <nav class="nav">
            <div class="wrapper">
                <a href="" class="nav__logo">
                    <img src="images/CB-Logo-2.png" alt="">
                </a>
                <ul class="nav__list">
                    <li class="nav__item">
                        <span class="hamburger">
                            <?xml version="1.0" encoding="UTF-8"?>
                            <svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <g id="hamburger__components" stroke="#FFFFFF" stroke-width="1" fill="none">
                                    <path d="M9,17 L27,17" id="middle-bun"></path>
                                    <path d="M9,22 L27,22" id="bottom-bun"></path>
                                    <path d="M9,12 L27,12" id="top-bun"></path>
                                    <ellipse id="border" cx="18" cy="18" rx="16" ry="16"></ellipse>
                                </g>
                            </svg>
                        </span>
                    </li>
                    <li class="nav__item">
                        <a href="">About</a>
                    </li>
                    <li class="nav__item">
                        <a href="">Team</a>
                    </li>
                    <li class="nav__item">
                        <a href="">News &amp; Media</a>
                    </li>
                    <li class="nav__item">
                        <a href="">Contact us</a>
                    </li>
                </ul>
            </div>
        </nav>
        <main class="base">
            <div class="base__image base__image--land"></div>
            <div class="base__texture">
                <div class="texture"></div>
            </div>
            <div class="base__grid">
                <div class="grid-line"></div>
                <div class="grid-line"></div>
                <div class="grid-line"></div>
                <div class="grid-line"></div>
                <div class="grid-line"></div>
                <div class="grid-line"></div>
                <div class="grid-line"></div>
            </div>
        </main>
        <div class="wrapper">
            <div class="u-full-height u-center-inner">
                <div class="intro">
                    <h1 class="intro__heading">
                        A text text
                        <span class="type-color--green">
                           text text
                        </span>
                    </h1>
                    <p class="intro__description">
                        text text text
                    </p>
                </div>
            </div>
        </div>
    </div>

Is this the right approach for BEM? Or does it look confusing? How to improve it? If something is in its own block only that part its the BEM? And how does it work in the sense of DRY? Example .intro will be used throughout each section on the site..

Thank you.

score 0 · Accepted Answer · answered Jun 22 '18 at 13:58

Looks ok for me.

You've just mixed BEM with other class syntax (class="u-full-height u-center-inner"). In my opinion, you would find this in many projects, too.

Your question about the DRY approach is more difficult to answer. You would normally use some template engine where you can write the intro part as a component and only include this into the main template. In the end you will always have duplicate code in HTML and that's really fine in my opinion, cause you definitely want reusable elements on your site.

is this how to structure bem?

1 Answers1