[html]作为初学者 Web 开发人员在编写标记时如何使用 BEM？答案

【问题标题】：[html]How do I utilize BEM when writing markup as a beginner web developer?[html]作为初学者 Web 开发人员在编写标记时如何使用 BEM？
【发布时间】：2020-12-03 03:56:53
【问题描述】：

我正在为朋友的作品集创建一个网站，作为我的第一个初学者项目。我遇到了使用 BEM 命名约定，并且对如何正确使用感到完全困惑。大多数教程使用一个非常简单的基本示例，我无法扩展到我实际在做的事情。下面基本上是我的网页，没有太多内容。我特别需要关于如何命名我的 HTML 标记的指导和说明，以及我是否做得对。

 <body class="page">
    
        <header class="header page__header">
            <nav class="nav-menu header__nav-menu">
                <!--Hamburger Menu Icon-->
                <div class="nav-menu__mobile-icon" onclick="changeNavIcon(this)">
                    <div class="nav-menu__icon-line1"></div>
                    <div class="nav-menu__icon-line2"></div>
                    <div class="nav-menu__icon-line3"></div>
                </div>
                <!--Navigation Menu-->
                <ul class="nav-menu__list">
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">HOME</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">STAND UP</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">VOICE OVER</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">ANIMATION</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">WRITTEN SCRIPT</a>
                    </li>
                    <li class="nav-menu__item">
                        <a href="#" class="nav-menu__link">GET IN TOUCH</a>
                    </li>
                </ul>
            </nav>
        </header>
    
        <main class="content page__content">
    
            <section class="section-intro content__section">
                <h1 class="section__title section-intro__title">Hello I am Person</h1>
                <img class="section__img section-intro__title" src="assets/imgs/headshot.jpg " alt=" ">
                <p class="section__text section-intro__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
                    molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
            </section>
    
            <section class="section-one content__section">
                <h2 class="section__title section-one__title">Stand Up</h2>
                <p class="section__text section-one__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
                    molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
                <video class="section__video section-one__video" controls>
                    <source src=" assets/vids/video.mp4 " type="video/mp4 ">
    
                    <p>Your browser doesn't support HTML5 video.</p>
                </video>
            </section>
    </main>

    <footer class="footer page__footer">
        <h3 class="footer__title">Follow my socials!</h3>
        <p class="footer_text">Placeholder content.</p>
    </footer>

</body>

我实际上有大约 5 个部分，我感到困惑和沮丧，因为这似乎很容易，但我无法理解这个概念。

我了解块和元素，但不了解修饰符语法。我也不明白为什么需要所有这些额外的类信息。例如，为什么要使用“header page__header”？还是在页面与页面不同时给 main 一个类？

【问题讨论】：

标签： html css bem

【解决方案1】：

首先了解制作网站时命名元素的目的是什么，如果您正确命名标签，它可以显着提高您的开发速度和调试代码。

如果您与团队成员一起工作，如果小组成员正确命名标签和元素，这也很有帮助，那么小组的其他成员将很容易理解代码。

如果您没有保持对元素的良好命名，那么添加新内容或对某些元素进行更改可能会给您带来麻烦，尤其是在大型项目中。命名应该简单，以便您在查看时很容易记住提到的部分。

但是如果你不是在一个非常大的项目中工作，那么就没有必要为每一个东西命名，命名通常用于专门改变那个东西。如果您想对所有相似的元素进行更改，请不要命名它，如果您只想更改所有其他元素中的一个元素，请仅命名该元素而不是其他元素。

如果您删除不必要的代码会更好，这将使您的代码看起来更整洁。由于整个 HTML 页面中只有一个 body，因此无需为 body 指定类。同样删除任何其他不需要的代码。

使用 CSS 的主要特点之一是它可以减少时间、精力并保持更整洁的代码。如果您创建一个多页面网站并创建一个外部 CSS 会很有帮助，我希望所有连接的页面都具有类似的模板，因为通常它是这样的，通过这种方式，只需维护一个 CSS 文件，您就可以更改所有相似的页面。

我希望你明白了。

【讨论】：

感谢您帮助解释它的重要性。我可以看到它是如何超级有用的！你会说我的命名方案是正确的吗？
@SuddenGun007 是的，您的命名风格是正确的，BEM 方法是一种很好的做法。

【解决方案2】：

我会给你一个如何在你的代码中使用它的例子：

import bem from "bem-cn";

const page = bem("page");
const navMenu = bem("nav-menu");

<body class={page}>
        <header class={page('header').mix('header')}>
            <nav class="nav-menu header__nav-menu">
                <!--Hamburger Menu Icon-->
                <div class={navMenu({'mobile-icon': true})} onclick="changeNavIcon(this)">
                    <div class={navMenu({'icon-line1': true})}></div>
                    <div class={navMenu({'icon-line2': true})}></div>
                    <div class={navMenu({'icon-line3': true})}></div>
                </div>
                <!--Navigation Menu-->
                <ul class={navMenu('list')}>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>HOME</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>STAND UP</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>VOICE OVER</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>ANIMATION</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>WRITTEN SCRIPT</a>
                    </li>
                    <li class={navMenu('item')}>
                        <a href="#" class={navMenu('link')}>GET IN TOUCH</a>
                    </li>
                </ul>
            </nav>
        </header>
    
        <main class={page('content').mix(content)}>
    
            <section class="section-intro content__section">
                <h1 class="section__title section-intro__title">Hello I am Person</h1>
                <img class="section__img section-intro__title" src="assets/imgs/headshot.jpg " alt=" ">
                <p class="section__text section-intro__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
                    molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
            </section>
    
            <section class="section-one content__section">
                <h2 class="section__title section-one__title">Stand Up</h2>
                <p class="section__text section-one__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias quisquam voluptatibus ab dolorem consectetur alias adipisci natus sed atque nostrum, pariatur minus quod odio consequuntur tenetur illo cupiditate exercitationem iusto, voluptate
                    molestiae omnis esse ullam! Odit nulla vitae voluptatem modi qui, distinctio eligendi ex id esse dolorum excepturi quidem vero.</p>
                <video class="section__video section-one__video" controls>
                    <source src=" assets/vids/video.mp4 " type="video/mp4 ">
    
                    <p>Your browser doesn't support HTML5 video.</p>
                </video>
            </section>
    </main>

    <footer class={page('footer').mix('footer')}>
        <h3 class="footer__title">Follow my socials!</h3>
        <p class="footer_text">Placeholder content.</p>
    </footer>

</body>

关于您的最新问题“例如，为什么要使用“header page__header”？或者在页面之间会有所不同时给 main 一个类？”，这取决于您的 CSS。如果您不需要这些类，则可以将其删除，但如果这些类有 CSS 属性，那么您将需要这些类。

【讨论】：

谢谢，我很困惑从哪里导入 BEM。我只是认为 BEM 是一种命名类的方法，而不是外部文件！这可能就是为什么这会如此令人困惑。
有一个bem的库，你可以看这里：npmjs.com/package/bem-cn