BEM 示例 CSS

BEM 是什么？

BEM是一种命名约定，用于将前端代码块（如HTML、CSS和JavaScript）分解为可重用的组件。

BEM的名字代表块（Block）、元素（Element）和修饰符（Modifier），其中：

• 块（Block）是代码块的高级组件或UI控件。
• 元素（Element）是块（Block）中的元素......
• 修饰符（Modifier）是更改块（Block）或元素（Element）状态的标志。

示例代码

下面是一个示例CSS代码片段，演示了使用BEM命名约定的方式。

/* Block */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #EEE;
}

/* Element */
.header__logo {
  width: 200px;
  height: 100px;
}

/* Modifier */
.header__logo--small {
  width: 100px;
  height: 50px;
}

.header__menu {
  display: flex;
}

.header__menu-item {
  margin: 0 10px;
  text-decoration: none;
  color: #333;
}

.header__menu-item:hover {
  color: #F00;
}

代码分析

上面的代码片段中，.header 被定义为块（Block）。.header__logo 被定义为 .header 块的元素（Element）。.header__logo--small 被定义为.header__logo的修饰符（Modifier）。

.header__menu 和 .header__menu-item 被定义为 .header 块的子元素（Sub-Element）和其自身的元素，例如，菜单元素。.header__menu-item:hover 是.web-app__header-menu-item 元素的伪类选择器。（更改菜单项的鼠标悬停颜色）。

通过使用BEM，我们可以更好地组织我们前端代码块，更容易找到和更改样式，也吸引其他开天关业。

结论

BEM是一个非常有用的前端开发工具，可让我们更好地组织和管理我们的前端代码块，降低代码耦合度，并增强可维护性。它的好处是更明显，适用于大多数前端团队。