CSS体系结构块元素模型（BEM） - 站点点

bem（块元素模型）是前端开发方法，命名约定和一组相关的工具。它起源于Yandex，旨在大型团队的高效开发。这种解释重点介绍了核心概念和命名系统。

>

bem将查看网站作为可重复使用的组件块的集合，可组合构建接口。 块是一个网站部分（标题，页脚，侧边栏等），如图2.3所示。 请注意，这里的“块”是指HTML页面段。

>

图2.3。 主页可能包括标头，主和页脚块。

>

>块可以筑巢。例如，标头块可能包含徽标，导航和搜索表单块（图2.4）。 页脚可以包含一个站点地图块。

图2.4。标题块，包括徽标，导航和搜索块。

元素比块更颗粒状。 正如BEM文档所述：“元素是执行特定函数的块的一部分。元素是上下文依赖的；它们仅在其父块内才有意义。” 例如，一个搜索表单块包括文本输入元素和提交按钮元素（图2.5）。 在这里，“元素”是指设计元素，而不是html元素。

>

图2.5。带有文本输入并提交按钮元素的搜索块。

> >一个主内容块可能包含一个文章列表块，该列表又包含文章促销块。每个促销块都可以具有图像，摘录和“阅读更多”元素（图2.6）。

图2.6。网站文章的促销障碍。

框架和元素构成了BEM命名约定的核心：>

块名称必须在项目范围内唯一。

元素名称必须在一个块中是唯一的。

>

>块变体（例如，一个深色搜索框）使用类名称中的修饰符。

• 块和元素名称由两个下划线（
）隔开。 修饰符与块/元素名称通过两个连字符（
• ）分开。
>
• 这是一个bem风格的搜索表格示例：

一个深为主题的版本：__ --

对应的CSS：

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

在标记和CSS中，

>和search--inversesearch__label--inverse是> 类，而不是替换。 仅使用类选择器；允许儿童和后代选择器，但也应针对类。避免元素和ID选择器。这使选择器特异性保持较低，防止副作用，并使CSS独立于标记模式。 唯一的块和元素名称可以防止命名冲突。 好处包括：

• 提高了新团队成员的代码可读性和理解。
• 提高了团队生产率。
• 降低命名碰撞和副作用。
• css独立于标记。
• 高CSS可重复使用性。

> BEM的范围超出了此概述。 BEM官方网站提供了全面的详细信息，工具和教程。 “ Get Bem”是命名惯例的另一个绝佳资源。

>

>（省略了常见问题部分，因为它是已经存在的信息的重复，并且会大大增加输出的长度而不添加新内容。

以上是CSS体系结构块元素模型（BEM） - 站点点的详细内容。更多信息请关注PHP中文网其他相关文章！