JS 中你不知道的命名规则--BEM 让你的代码更加清晰透彻

C4rTryn思诚2023-10-30 17:03

1. BEM（Block Element Modifier）

1. BEM是什么

BEM（Block Element Modifier）是一种命名约定，用于在HTML和CSS中命名和组织类名，以实现可重用、可扩展和易于维护的代码结构。

2. BEM命名规则

  • 块（Block）：块是一个独立的实体，代表一个可重用的组件或模块。

块的类名应该使用单词或短语，并使用连字符（-）作为分隔符。例如：.header、.menu。

  • 元素（Element）：元素是块的组成部分，不能独立存在。

元素的类名应该使用双下划线（__）作为分隔符，连接到块的类名后面。例如：.menu__item、.header__logo。

  • 修饰符（Modifier）：修饰符用于描述块或元素的不同状态或变体，用来更改外观或行为。

修饰符的类名应该使用双连字符（--）作为分隔符，连接到块或元素的类名后面。例如：.menu__item--active、.header__logo--small。

3. BEM的优点

  • 可重用性：使用块和元素的组合，可以创建可重用的组件，减少重复编写代码的工作量。
  • 可扩展性：通过添加修饰符，可以轻松地对块或元素进行样式变化或状态切换。
  • 易于理解和维护：通过规范的命名约定，代码结构清晰，易于他人理解和维护。
  • 避免样式冲突：由于类名的层级结构，BEM可以避免样式冲突和意外覆盖。

2. 实战WEUI组件

下面我们先看一个ＷＥＵｉ组件

如果是按照普通CSS命名法来写，光想英文单词恐怕脑容量已经负载了，但是我们如果用BEM命名法来写，不仅不用我们去想怎么给每个板块命名并且我们光看代码页面就知道怎么写，这也对用了我们企业级页面开发规则，通过规范的命名约定，代码结构清晰，易于他人理解和维护。

下面我们先从第一部分开始对页面进行ＢＥＭ划分：

那么第二部分就是

下面一个标题而我们直接复用上面一个ｐａｎｅｅｌ组件　再改一下标题就行，这体现了我们组件化开发：将页面拆分成多个组件，每个组件都有自己的职责和功能，可以重复使用，提高代码复用率和可维护性。

3. CSS架构

企业级页面开发中 CSS HTML JS 是分离运营的

1. reset.css

其中如好多不同浏览器之间的内核是不同的，对于box-sizing盒子大小的计算方式是不同的

  1. (公摊) 标准盒子模型 = content + padding + border + margin

  2. IE盒模型 = content（自动缩放） + padding + border + margin

为了能够给用户更好的体验，适配不同用户所用浏览器内核不同，去除浏览器间的样式区别，实现无差别页面显示我们需要对页面的css写一个reset.css，也就是页面css的重写。

js 复制代码 
* {
    margin: 0;
    padding: 0;
    outline: 0; /*input a 聚焦或高亮时用*/
    /* box-sizing: border-box; 盒子模型方式切换*/
}

2. base.css

用于变现我们页面组件通用样式的显示

js 复制代码 
.page{
    /* 手机滚屏阅读的常见操作 */
    /* 占满整个页面写法 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 超出则滚动 */
    overflow-y:auto;
    /* 滚动条样式 让滚动如丝般顺滑*/
    /* 移动端浏览器前缀都是 -webkit
         overflow-scrolling 在试验阶段
    */
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box; /*IE盒模型*/
    z-index: 1;
}
body{
    /* /*为什么要设置变量 */
    /* 统一更改 管理 利用 皮肤更换*/
    /* 极大提高了前端css变量的管理 */
    --weui-B6-0: #222;
    --weui-BG-2: #191919;
    --weui-F6-1: rgba(255,255,255,0.5);
}

body{
    color: rgba(255,255,255,0.8);
}
.page,body{
    /*weui技术很激进 css4 变量 */
    background-color: var(--weui-B6-0);
}
.page__hd{
    padding: 40px;
}
.page__title{
    text-align: left;
    font-size: 20px;
    font-weight: 400;
}
.page__desc{
    margin-top: 4px;
    color: var(--weui-F6-1);
    text-align: left;
    font-size: 14px;
}
.page__bd{
    padding-bottom:20px ;
}

2. paneel.css

最后就是我们组件样式的编写

js 复制代码 
.weui-panel{
    background-color: var(--weui);
    margin-top: 10px;
    position: relative;
    overflow: hidden;
}
 /* 第一个 没必要mt */
 /* 其余的会和前面的panel mt */
.weuipanel:first-child{
    margin-top: 0px;
}
.weui-panel__hd{
    background-position: 16px 16px 13px;
    color: var(--weui-F6-0);
    font-size: 15px;
    font-weight: 500;
    position: relative;
}

4. HTMl之BEM命名

最后就是我们的html文件的框架编写，也是最关键最困难的一部分，至于CSS样式排版谁不会，如果你能够写一个让人很容易看懂也很容易修改的HTML框架，这将会是你在大厂蒸蒸日上的关键一步，那么下面就看我们对于WEUI组件的html文件如何通过BEM命名法高效高质量的实现

js 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI源码之Panel组件</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./panel.css">
</head>
<body>
    <div class="page">
        <div class="page__hd">
            <h1 class="page_title">Panel</h1>
            <p class="page__desc">面板</p>
        </div>
        <div class="page__bd">
            <!-- panel组件 -->
            <div class="weui-panel">
                <div class="weui-panel__hd">
                    图文组合列表
                </div>
                <div class="weui-panel__bd">
                    <!-- 开始了 media-box 组件 B-->
                    <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg=="
                            alt="" class="weui-media-box__thumb">
                        </div>
                        <div class="weui-media-box__bd">
                            <strong class="weui-media-box__title">标题一</strong>
                            <p class="weui-mdeid-box__desc">
                                由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                            </p>
                        </div>
                    </a>
                    <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg=="
                            alt="" class="weui-media-box__thumb">
                        </div>
                        <div class="weui-media-box__bd">
                            <strong class="weui-media-box__title">标题二</strong>
                            <p class="weui-mdeid-box__desc">
                                由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                            </p>
                        </div>
                    </a>
                </div>
                <div class="weui-panel__ft"></div>
            </div>
        </div>
    </div>
</body>
</html>

其中再穿插一个小知识，有掘友可能会不理解为什么我们插入图片的时候不用图片的图片地址，答案是如果我们插入一个图片如果用计算机能读懂的base64编译格式去插入，图片的内存消耗将会缩小到1kb左右，而如果我们用图片地址直接插入，这张图片所耗的内存大小将会达到3MB左右，所以为了能够优化到极致，我们还是使用base64编码格式是最优解。 接下来附上我们的html 供大家学习参考

js 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEUI源码之Panel组件</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./panel.css">
</head>
<body>
    <div class="page">
        <div class="page__hd">
            <h1 class="page_title">Panel</h1>
            <p class="page__desc">面板</p>
        </div>
        <div class="page__bd">
            <!-- panel组件 -->
            <div class="weui-panel">
                <div class="weui-panel__hd">
                    图文组合列表
                </div>
                <div class="weui-panel__bd">
                    <!-- 开始了 media-box 组件 B-->
                    <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg=="
                            alt="" class="weui-media-box__thumb">
                        </div>
                        <div class="weui-media-box__bd">
                            <strong class="weui-media-box__title">标题一</strong>
                            <p class="weui-mdeid-box__desc">
                                由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                            </p>
                        </div>
                    </a>
                    <a href="javascript:;" class="weui-media-box weui-media-box_appmsg">
                        <div class="weui-media-box__hd">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4YcfyR9x23Hw+/DY9dhm2WZG0kbT9NP0/PTL8sux7LFe115T1VM+zz7i+OIXxhes6qxr2mvA8MCe6J6M4oz6/frr+us5zjn2/fa67rqB4IF13XWn6ad83nxa1loqyirn+eccHxx4AAAC/klEQVRo3u2W2ZKiQBBF8wpCNSCyLwri7v//4bRIFVXoTBBB+DAReV5sG6lTXDITiGEYhmEYhmEYhmEYhmEY5v9i5fsZGRx9PyGDne8f6K9cfd+mKXe1yNG/0CcqYE86AkBMBh66f20deBc7wA/1WFiTwvSEpBMA2JJOBsSLxe/4QEEaJRrASP8EVF8Q74GbmevKg0saa0B8QbwBdjRyADYxIhqxAZ++IKYtciPXLQVG+imw+oo4Bu56rjEJ4GYsvPmKOAB+xlz7L5aevqUXuePWVhvWJ4eWiwUQ67mK51qPj4dFDMlRLBZTqF3SDvmr4BwtkECu5gHWPkmDfQh02WLxXuvbvC8ku8F57GsI5e0CmUwLz1kq3kD17R1In5816rGvQ5VMk5FEtIiWislTffuDpl/k/PzscdQsv8r9qWq4LRWX6tQYtTxvI3XyrwdyQxChXioOngH3dLgOFjk0all56XRi/wDFQrGQU3Os5t0wJu1GNtNKHdPqYaGYQuRDfbfDf26AGLYSyGS3ZAK4S8XuoAlxGSdYMKwqZKM9XJMtyqXi7HX/CiAZS6d8bSVUz5J36mEMFDTlAFQzxOT1dzLRljjB6+++ejFqka+mXIe6F59mw22OuOw1F4T6lg/9VjL1rLDoI9Xzl1MSYDNHnPQnt3D1EE7PrXjye/3pVpr1Z45hMUdcACc5NVQI0bOdS1WA0wuz73e7/5TNqBPhQXPEFGJNV2zNqWI7QKBd2Gn6AiBko02zuAOXeWIXjV0jNqdKegaE/kJQ6Bfs4aju04lMLkA2T5wBSYPKDGF3RKhFYEa6A1L1LG2yacmsaZ6YPOSAMKNsO+N5dNTfkc5Aqe26uxHpx7ZirvgCwJpWq/lmX1hA7LyabQ34tt5RiJKXSwQ+0KU0V5xg+hZrd4Bn1n4EID+WkQdgLfRNtvil9SPfwy+WQ7PFBWQz6dGWZBLkeJFXZGCfLUjCgGgqXo5TuSu3cugdcTv/HjqnBTEMwzAMwzAMwzAMwzAMw/zf/AFbXiOA6frlMAAAAABJRU5ErkJggg=="
                            alt="" class="weui-media-box__thumb">
                        </div>
                        <div class="weui-media-box__bd">
                            <strong class="weui-media-box__title">标题二</strong>
                            <p class="weui-mdeid-box__desc">
                                由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                            </p>
                        </div>
                    </a>
                </div>
                <div class="weui-panel__ft"></div>
            </div>
        </div>
    </div>
</body>
</html>

总结

到这里相信大家对于BEM不仅理解其内核与优势，也有了自己关于命名规范的见解想法，所以如果我们能够利用好BEM不仅对我们以后切一个页面或者在公司安排的任务中也能如鱼得水，轻松胜任。

或及面试官问你前端相关知识时，你能够回答出Leader满意的答案：你以团队效率为首，用BEM命名法，通过规范的命名约定，代码结构清晰，易于队伍的理解和维护。与各种前端技术和工具结合使用，实现可重用、可扩展和易于维护的代码结构。

感谢大家的阅读，点点赞吧♥

如果想了解更多有用的干货，点赞+收藏第一时间获取有用的小知识

开源Git仓库: gitee.com/cheng-bingw...

更多内容：从新手到大厂程序员 大厂如何写优质代码

相关推荐
懒羊羊大王呀32 分钟前
CSS——属性值计算
前端·css
看到请催我学习2 小时前
如何实现两个标签页之间的通信
javascript·css·typescript·node.js·html5
昨天；明天。今天。4 小时前
案例-任务清单
前端·javascript·css
秋殇与星河7 小时前
CSS总结
前端·css
神之王楠7 小时前
如何通过js加载css和html
javascript·css·html
软件开发技术深度爱好者11 小时前
用HTML5+CSS+JavaScript庆祝国庆
javascript·css·html5
昨天；明天。今天。17 小时前
案例-表白墙简单实现
前端·javascript·css
金灰1 天前
CSS3练习--电商web
前端·css·css3
TonyH20021 天前
webpack 4 的 30 个步骤构建 react 开发环境
前端·css·react.js·webpack·postcss·打包
王小二(海阔天空)1 天前
个人文章合集 - 前端相关
前端·css·vue·jquery
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache