前言

在前端开发中，良好的代码结构和命名约定对于维护和协作至关重要。而新手在写页面时，结构一般不会有太大问题，就是取类名的时候浪费时间(元素之间不关联，每个取独立的名字)，当你需要写一个页面的时候，你会发现就算你过六级，你的词汇量还是不够，跟何况四级都没过的我们。而BEM（Block, Element, Modifier）作为一种高效的CSS命名方法，以及HTML语义化，都是提升代码可读性和可维护性的关键实践。本文将深入探讨BEM命名规范，并结合HTML语义化标签的个别使用，通过一个示例来说明如何在实际项目中应用这些原则。

BEM命名规范

什么是BEM？

BEM全称是Block Element Modifier，是一种组件化模块化思维的CSS命名方法，可以在大型项目中提升代码可读性和可维护性问题。它通过明确区分页面中的“块Block”、“元素Element”和“修饰符Modifier”，可以构建清晰、易于理解的代码结构。

BEM的核心概念

Block（区块） :
- 表示页面上的一个模块或者组件，比如一整个页面（page）、一个导航栏（nav）、一个卡片（card）等。Block是可复用的，具有独立意义的实体。
Element（元素） :
- 是Block的组成部分，不能脱离Block而存在，与Block为隶属关系。Elements用来描述Block内部的子部件，比如,页面的头部（page__hd）、卡片中的标题（card__title）。Element的命名通过在其父Block名称后添加双下划线__来表示。
Modifier（修饰符） :
- 用于描述Block或Element的不同状态或变体。Modifier可以改变Block或Element的外观或行为，比如一个被激活的按钮（button--active）、一个具有特定样式的导航项（nav__item--highlighted）。Modifier命名通过在其所属Block或Element名称后添加连字符-来实现。

BEM命名规则

块的命名采用驼峰式或者说就一个英文单词，如.block 或 .blockName。
子元素紧随其块名之后，用双下划线连接，如.block__hd。
修饰符同样使用双下划线连接，但放在块名或元素名之后，前缀以两个下划线，如.block__hd-primary 或 .block_hd-default。

实战微信页面

首先来分析一下，微信的页面，如下图：

我们先将这一整个页面命名为vx,然后将其划分为每一块分别为vx__hd,vx__bd和vx__ft，再将每一区块进行分解：

vx__hd中有 vx__title和vx__add；
vx__bd中有一个vx__bd-desc;
vx__ft中有vx__ft-item

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vx页面</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="vx">
        <div class="vx__hd">
            <div class="vx__title">微信</div>
            <img class="vx__add" src="./img/icon_添加.png" alt="">
        </div>
        <div class="vx__bd">
            <p class="vx__bd-desc">暂无消息</p>
        </div>
        </div>
        <div class="vx__ft">
            <div class="vx__ft-item">
                <img  src="./img/聊天.png" alt="">
                <p class="vx__ft-desc">聊天</p>
            </div>
            <div class="vx__ft-item">
                <img src="./img/通讯录.png" alt="">
                <p class="vx__ft-desc">通讯录</p>
            </div>
            <div class="vx__ft-item">
                <img src="./img/发现.png" alt="">
                <p class="vx__ft-desc">发现</p>
            </div>
            <div class="vx__ft-item">
                <img src="./img/我.png" alt="">
                <p class="vx__ft-desc">我</p>
            </div>
        </div>
    </div>
</body>
</html>

大家可以看到我在vx__ft-item中定义描述性文字的时候，我并没有运用div标签而是用p标签，p标签具有文本段落的语义，而div标签则没有特定的语义，更多用于布局和样式。这边先稍微提一下，之后会详细了解。

css 样式

*{
    margin: 0;
    padding: 0;
}

.vx__hd{
    display: flex;
    padding: 15px;
    font-size: 18px;
    background-color: white;
}
.vx__title{
    flex:1;
    text-align: center;
    margin-left: 20px;
}
.vx__add{
    margin-top: 2px;
}
img{
    width: 20px;
    height: 20px;  
}
.vx__bd{
    background-color: #dcdcdc;
    height: 530px;
    width: 375px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #a9a8a8;
}
.vx__ft{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    height: 75px;
    background-color: white;
}
.vx__ft-item{
    text-align: center;
}
 /*css高级选择器  +兄弟选择器*/
.vx__ft-item+.vx__ft-item{
    margin-left: 65px;
}

.vx__ft-item+.vx__ft-item: 这是一个兄弟选择器。它匹配所有紧接在一个.vx__ft-item元素之后的.vx__ft-item元素。换句话说，这条规则会应用到每一个.vx__ft-item，只要它前面紧跟着另一个.vx__ft-item。这意味着，因此，每当有一个.vx__ft-item紧跟在另一个.vx__ft-item之后，后者就会应用{}里的css样式，也就是，后者的左边距就会比前者多出65像素。

效果如下图：

上图图标皆来自阿里图标库： iconfont-阿里巴巴矢量图标库

总结

通过使用BEM命名规范，我们能清晰的看出代码的层次结构，别人一眼就可以看出来这是干什么的，而且还减少了我们对词汇量依靠，有助于大项目的开发和维护，这样有目的有思路的去命名，基本上不会出现css的命名冲突，如果您的项目团队成员看到你这么会命名，这代码怎么看都舒服（总不能把代码交给同事时，他的内心活动直接爆炸吧哈哈哈哈）。一旦掌握BEM的精髓方法，你在前端工程的道路上又前进了一大步。

我太难了啊.gif

PS：代码还有很多不足之处，还待改进🤐🤐🤐

BEM-CSS实战微信页面

前言