[html]Web 开发新手在编写标记时如何使用 BEM？

Question

我正在为朋友的作品集创建一个网站，作为我的第一个初学者项目。我遇到了使用 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 个部分，我感到困惑和沮丧，因为这看起来很容易，但我无法理解这个概念。

我理解块和元素，但不理解修饰符语法。我也不明白为什么需要所有这些额外的 class 信息。例如，为什么要使用“header page__header”？或者给 main 一个 class 无论如何它会因页面而异？

Answer 1

我将举例说明如何在您的代码中使用它：

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 一个 class，因为它无论如何都会因页面而异？”，这取决于在你的 CSS 上。如果你不需要这些 classes，你可以删除它，但是如果这些 classes 有 CSS 属性，那么你将需要那个 classes .

Answer 2

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

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

如果您没有保持元素的良好命名，那么在添加新内容或更改某些元素时可能会给您带来麻烦，尤其是在大型项目中。命名要简单，这样大家看一眼就能记住上面提到的部分。

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

如果您删除不必要的代码会更好，这将使您的代码看起来更整洁。不需要给正文 class ，因为整个 HTML 页面只有一个正文。同样删除任何其他不需要的代码。

使用 CSS 的主要特点之一是它可以减少时间、精力并保持更整洁的代码。如果你创建一个多页网站并创建一个外部CSS，我希望所有连接的页面都有相似的模板，因为一般都是这样，这样只维护一个CSS 文件你可以改变所有相似的页面。

希望你明白了。

[html]Web 开发新手在编写标记时如何使用 BEM？

[html]How do I utilize BEM when writing markup as a beginner web developer?

html

css

bem