概念
BEM是一种前端开发中常用的命名规范和方法论，全称为块（Block）、元素（Element）和修饰符（Modifier），它的主要目的是为了更好地管理HTML和CSS代码，提高代码的可维护性和可复用性。 BEM风格的命名规则如下：
- 块（Block）：是具有独立功能的页面组件，例如header、footer、menu等等，块的名称应该是简单明了的，并且可以由多个单词组成，每个单词之间使用短横线（-）连接，例如：header、main-menu等。
- 元素（Element）：是块的组成部分，例如header中的logo、menu中的item等等，元素的名称应该是块的名称后面加上两个下划线（__），例如：header__logo、menu__item等。
- 修饰符（Modifier）：是块或元素的状态、变化或修饰，例如按钮的颜色、大小、状态等等，修饰符的名称应该是块或元素的名称后面加上两个短横线（--），例如：button--small、button--primary等。 使用BEM风格的命名规则可以使HTML和CSS代码更加清晰、具有可读性和可维护性。同时，BEM风格还可以支持代码的复用，例如一个块可以在多个页面中使用，并且每个页面中的元素和修饰符可以有所不同，从而减少代码的冗余和重复，提高代码的效率和质量。
示例
下面是一些使用BEM风格的命名规则的例子：
- 块（Block）：
plaintextCopy code
<header class="header"></header>
<main class="main"></main>
<footer class="footer"></footer>
- 元素（Element）：
plaintextCopy code
<header class="header">
<img class="header__logo" src="./logo.png" alt="logo">
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a href="#">Home</a></li>
<li class="header__nav-item"><a href="#">About</a></li>
<li class="header__nav-item"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
- 修饰符（Modifier）：
plaintextCopy code
<button class="button button--primary button--small">Submit</button>
<input class="input input--error" type="text" placeholder="Please enter your name">
在以上例子中，块的名称包括header、main、footer等，元素的名称包括header__logo、header__nav-item等，修饰符的名称包括button--primary、button--small、input--error等。这些命名规则可以清晰地区分出不同的组件、元素和状态，提高代码的可读性和可维护性，并且可以支持代码的复用和扩展。
