什么是BEM？—— 介绍HTML/CSS架构的新思想——

1.什么是BEM？

BEM即块（Block）、元素（Element）、修饰符（Modifier）的缩写，它是一种HTML/CSS架构的新思想。它旨在为分离前端代码提供更好的结构和组织形式，从而使代码更加可维护、可扩展和可重用。

2. BEM的特点

BEM的特点在于将HTML/CSS构造视为一个块（Block）为基本元素。块是指网页上的一个单独的功能模块。它有自己的语义和样式，与其它模块独立存在。块可以包含任意数量的元素（Element）和修饰符（Modifier） 。

3. BEM的使用场景

当代码量或网站功能变得复杂时，前端代码难以扩展和维护。在这种情况下，使用BEM可以使代码结构化、组织良好、可维护性高，并且具有：

重用性

易于拓展

代码的可读性和可维护性

4. BEM如何使用

以下是一个使用BEM的操作流程：

定义块：通过在HTML代码中为块添加一个class名称定义块，这个名称应该指明该块所代表的功能或实体。

定义元素：将块分解为元素，并为元素选择一个明确的名称。

定义修饰符：修饰符使用__ (双下划线) 和_ (单下划线)表示。双下划线用于块中的元素，单下划线用于块的修饰符。

例子：

<div class="header">
  <h1 class="header__title">标题</h1>
  <div class="header__nav">
    <ul class="header__nav__list.header__nav__list_mod">
      <li class="header__nav__list__item">首页</li>
      <li class="header__nav__list__item">新闻</li>
      <li class="header__nav__list__item header__nav__list__item_mod">商城</li>
    </ul>
  </div>
</div>

在上述示例中，块的名称是header，它有一个__title元素，两个__nav元素，一个有_mod修饰符的__nav__list元素，以及一个有_mod修饰符的__nav__list__item元素。

以上就是关于BEM的介绍，希望能对你有所帮助！

猜你喜欢