bem规范

1. 块（Block）：在BEM中，一个独立的CSS样式定义为一个块，每个块都有一个唯一的名称。它表示一个独立的、可复用的组件，可以单独进行开发和维护。
2. 元素（Element）：块中的一部分称为元素，它们与块共享相同的样式和命名空间。元素可以通过在块名后面添加一个连字符和元素名称来定义。
3. 修饰符（Modifier）：修饰符是用来改变块或元素的外观或行为的额外样式。它们可以通过在块名或元素名后面添加一个连字符和一个修饰符名称来定义。

示例

1. 块（Block）

	.block {}

2. 元素（Element）

    .block__element {}

3. 修饰符（Modifier）

    .block--modifier {}

举个具体的例子，假设我们有一个按钮块（button block），它包含一个按钮元素（button element），我们可以使用BEM规范来命名：

    .button {} /* 块 */  

    .button__text {} /* 元素 */  

    .button--primary {} /* 修饰符 */

这个示例中，.button是按钮块的名称，.button__text是按钮元素（文本部分）的名称，.button--primary是按钮块的修饰符（主样式）。通过使用BEM规范，我们可以清晰地识别不同的CSS样式，并更好地维护和扩展代码。

举例

假设我们正在开发一个电商网站，其中有一个商品详情页面（product details page）。在这个页面中，我们有一个商品图片块（product image block），它包含一个商品图片元素（product image element）和两个修饰符（modifiers）：一个是大图（large），一个是小图（small）。

使用BEM规范来命名这些样式，我们可以这样写：

	.product-image {} /* 块 */  

	.product-image__image {} /* 元素 */  

	.product-image--large {} /* 大图修饰符 */  

	.product-image--small {} /* 小图修饰符 */

在HTML中，我们可以这样使用这些样式：

	<div class="product-image">  

	  <img class="product-image__image" src="large_image.jpg">  

	</div>  

	  

	<div class="product-image product-image--large">  

	  <img class="product-image__image" src="large_image.jpg">  

	</div>  

	  

	<div class="product-image product-image--small">  

	  <img class="product-image__image" src="small_image.jpg">  

	</div>

通过使用BEM规范，我们可以清晰地识别不同的CSS样式，并更好地维护和扩展代码。同时，它也可以帮助开发团队更好地协作和交流。