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...

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

相关推荐
wjs040610 小时前
用css实现一个类似于elementUI中Loading组件有缺口的加载圆环
前端·css·elementui·css实现loading圆环
刻刻帝的海角1 天前
CSS 颜色
前端·css
python算法(魔法师版)2 天前
html,css,js的粒子效果
javascript·css·html
LBJ辉2 天前
1. 小众但非常实用的 CSS 属性
前端·css
学不完了是吧3 天前
html、js、css实现爱心效果
前端·css·css3
Zaly.3 天前
【前端】CSS实战之音乐播放器
前端·css
孤客网络科技工作室3 天前
不使用 JS 纯 CSS 获取屏幕宽高
开发语言·javascript·css
m0_748247553 天前
【HTML+CSS】使用HTML与后端技术连接数据库
css·数据库·html
肖老师xy3 天前
css动画水球图
前端·css
LBJ辉3 天前
2. CSS 中的单位
前端·css
热门推荐
012023美赛A题之Lotka-Volterra【完整思路+代码】02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04机器人持续学习基准LIBERO系列10——文件结构05Windows10安装PCL1.14.0及点云配准06密码学原理技术-第六章-introduction to pulibc-key cryptography07RAG 实践- Ollama+RagFlow 部署本地知识库08xgboost: Why not implement distributed XGBoost on top of spark09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10医疗图像处理2023：Transformers in medical imaging: A survey