前言

在前端开发中，命名约定和代码结构 一直是开发者们争论的焦点。例如在我们写css代码时可能会遇到取类名焦头烂额的情况,那么可以通过什么方法使命名更规范更高效呢？在这个领域，有一种方法论凭借其独特的设计理念和易于理解的规范，正在渐渐成为主流，它就是 BEM。

正文

那么在我们日常开发中，常见的命名方法有以下几种：

中划线命名法（Kebab Case） ：单词之间使用中划线连接，如：.some-class该命名方法正好和 CSS 属性名称如background-color、font-size。保持了一致。
下划线命名法（Underscore Case） ：是一种简单直接的命名方式，单词之间使用下划线连接。如：background_color、font_size。
BEM（块、元素、修饰符） :是一种前端开发中的命名规范，旨在提高代码的可读性、可维护性和可协作性。

------那么BEM命名法为什么能脱颖而出呢？

BEM 是一种前端开发中的命名规范，它的名称来源于块（Block）、元素（Element）、修饰符（Modifier）这三个概念。BEM 的核心思想是将页面中的每个组件拆分为块、元素和修饰符，从而实现组件化和模块化开发。 下面详细介绍一下 BEM 的命名规范，并通过一些实例进行解释：

1. 块（Block） ：

块代表独立的、可重用的组件，可以看作是一个独立的模块或者是一个组件的容器。块的命名应该是描述该组件的名词 ，并且以字母开头，多个单词之间使用连字符（中划线）分隔。例如：button就是按钮、header就是页面的头部、menu就是菜单。

2. 元素（Element） ：

元素是块的一部分，具有依赖关系，并且不能独立存在。元素应该以块的名称作为前缀，并且用两个下划线 连接块名称和元素名称。例如：button__text、header__logo、menu__item。

3. 修饰符（Modifier） ：

修饰符用于描述元素的状态或外观，可以使元素具有不同的变体。修饰符应该以块或者元素的名称作为前缀，并且用两个连字符 连接块或元素名称和修饰符名称。例如：button--large、header__logo--small、menu__item--active。

下面通过一个按钮组件的例子来说明 BEM 的命名规范：

html部分

css 复制代码

<button class="button button--large">
    <span class="button__text">Click Me</span>
</button>

css部分

css 复制代码

.button {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #333;
    background-color: #fff;
    color: #333;
    font-size: 16px;
}

.button--large {
    font-size: 20px;
    padding: 15px 30px;
}

.button__text {
    font-weight: bold;
}

我们可以发现，按钮组件被命名为 button，按钮文本被命名为 button__text。通过为按钮添加 button--large 修饰符，可以改变按钮的样式为大号按钮。怎么样，这种命名方式是不是非常的清晰明了，易于阅读和理解，并且能够有效地组织和管理前端代码。

最后

BEM为我们提供了一种统一的命名规范，为css中命名提供了新的思路。但在实际大项目中，因为每个人理解的块元素修饰符不一样，对于层级结构经验不足的工程师效果不一定好。所以说还是根据日常经验的积累和团队定的规范为准。

欢迎大家在评论区留言！

假如您也和我一样，在准备春招。欢迎加我微信lyhGetup，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！

颠覆传统—探索前端开发中的BEM命名方法论

前言

正文

最后