Question

我有一个加载叠加层/页面，这就是我通过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？从干的意义上讲，它是如何工作的？该网站的每个部分都将使用示例.intro。

谢谢。

Answer 1

给我很好。

您刚刚将BEM与其他类语法（class =“ u-full-height u-center-inner”）混合使用。我认为，您也会在许多项目中找到它。

关于DRY方法的问题更难以回答。通常，您将使用一些模板引擎，您可以在其中将简介部分作为组件编写，并且仅将其包括在主模板中。最后，您将始终有重复的HTML代码，在我看来，这确实很好，因为您肯定希望网站上具有可重复使用的元素。

这是bem的结构吗？

1 个答案: