这是如何构造bem？

Question

我有一个加载 overlay/page，这就是我通过 BEM 构建它的方式。我对它应该如何嵌套有点困惑：

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

这是我的着陆页：

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

这是 BEM 的正确方法吗？还是看起来很混乱？如何改进？如果某些东西在它自己的块中，只有那部分是 BEM？在 DRY 的意义上它是如何工作的？示例 .intro 将在网站的每个部分中使用..

谢谢。

Answer 1

我觉得还行。

您刚刚将 BEM 与其他 class 语法混合使用 (class="u-full-height u-center-inner")。在我看来，您也会在许多项目中发现这一点。

你关于 DRY 方法的问题更难回答。您通常会使用一些模板引擎，您可以在其中将介绍部分作为组件编写，并且只将其包含到主模板中。最后，您总是会在 HTML 中有重复的代码，我认为这很好，因为您肯定希望网站上有可重用的元素。

这是如何构造bem？

is this how to structure bem?

html

css

bem