CSS命名规范——BEM

CSS命名规范——BEM

引用

CSDN

1.

https://blog.csdn.net/zhanggongzichu/article/details/145324116

在前端开发中，CSS样式类的命名一直是一个令人头疼的问题。如何才能让CSS代码更加规范、易于维护？BEM（Block Element Modifier）命名规范提供了一个很好的解决方案。本文将详细介绍BEM的核心概念、特征和应用场景，帮助开发者更好地理解和使用这一规范。

引言

CSS样式类命名难、太难了，难于上青天，这个和JS变量命名还不一样。看看项目中五花八门的样式类命名

如何简单且规范的命名样式类呢？

BEM是什么？

BEM代表块（Block）、元素（Element）和修饰符（Modifier）。无论是什么页面，都可以拆解成这三部分。

BEM是由Yandex公司推出的一套CSS命名规范，官方是这么描述它的：

• BEM是一种让你可以快速开发网站并对此进行多年维护的技术。
• BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。

块Block

特征：

• 代表了更高级别的抽象或组件
• 块名称描述的它的目的是为了表达“这是什么”
• 块名称定义的是命名空间，它保证元素依赖于块
• 块的嵌套：
• 块可以互相嵌套
• 可以有任意数量的嵌套层

应用：

• 块可以嵌套在任何其他块内。例如：head块可以包括徽标 (logo)、搜索表单 (search) 和授权块 (auth)。

元素Element

特征：

• 代表块的后代，用于形成一个完整的块的整体
• 元素名称描述的也是“这是什么”
• 它不能单独使用，是块的组成部分
• 元素的嵌套：
• 元素可以互相嵌套
• 可以有任意数量的嵌套级别
• 元素始终是块的一部分，也不是另一个元素，这意味着元素名称定义层次结构

应用：

• 元素是块的组成部分