前言

随着项目更新迭代变得庞大，如果没有一个高效的CSS命名规范，我们维护时将会变得十分困难，CSS命名的重要性不容忽视，因为它直接影响到代码的可维护性、可读性和协作能力。

BEM是什么？

BEM（Block Element Modifier）是一种用于命名和组织CSS类的命名约定，它有助于更有效地管理和维护大型代码库中的CSS样式。

BEM中的类名通常是非常具体的，因此它们减少了不同样式之间的冲突可能性。这有助于确保不同组件或模块之间的样式不会意外地相互影响。BEM鼓励将样式封装到块和元素中，这有助于创建可重用的CSS组件。这些组件可以在不同的项目和页面中使用，提高了代码的可重用性和一致性。

BEM是一种有助于更有效地管理和维护CSS代码的命名约定，适用于各种项目，特别是在大型项目、设计系统和团队协作方面发挥作用。它有助于提高代码的质量、可维护性和可读性。

BEM命名

BEM（Block Element Modifier）是一种用于给HTML和CSS命名的规则，目的是让你的网页代码更容易理解和维护。它的原则很简单：

好的，让我们以"WeUI"中的一个示例来解释BEM命名规范。

假设我们有一个WeUI中的按钮组件，我们可以使用BEM规范为它命名：

块（Block） ：按钮组件是一个独立的块，我们可以将其称为 .weui-button。
元素（Element） ：按钮组件内部可能有不同的元素，例如按钮的文本或图标。我们可以用元素来表示这些内部组件，例如 .weui-button__text 表示按钮内的文本元素。
修饰符（Modifier） ：修饰符用于改变块或元素的外观或状态。例如，如果我们想要创建一个大号按钮，我们可以使用修饰符，比如 .weui-button--large。

<button class="weui-button weui-button--large">
    <span class="weui-button__text">点击我</span>
</button>

在这个例子中，.weui-button是块，.weui-button__text是按钮内的元素，.weui-button--large是按钮的修饰符。

概括一下

库名（Library Name） ：库名是您的CSS类名的前缀，通常代表整个库或项目的名称。它用于避免与其他库或项目中的类名冲突,这里的库名是weui
组件名（Component Name） ：组件名是特定组件的名称，它描述了这个组件的用途。组件名通常是块（Block）的一部分，这里的button就是一个组件按钮
状态名（State Name） ：状态名用于表示组件的不同状态或变体。它通常是修饰符（Modifier）的一部分，这里--large表示状态名
元素名 (Element Name) 是指组件内部的小部分，通常是与块（Block）相关的元素,例如__text

为什么要使用BEM

清晰可读的类名结构： BEM使用块、元素和修饰符的结构，使类名变得非常清晰和直观。通过查看类名，您可以轻松地理解它们与页面中的HTML元素的关联，提高了代码的可读性。
避免样式冲突： BEM的类名通常是非常具体的，减少了不同样式之间的冲突可能性。这有助于确保不同组件或模块之间的样式不会意外地相互影响。
可重用性： BEM有助于创建可重用的样式组件，这些组件可以在不同的项目和页面中使用。这节省了时间和努力，因为您不必在每个新项目中重新创建相同的样式。
提高协作： BEM提供了一种一致的命名约定，有助于团队成员更轻松地协作。所有人都可以遵循相同的规则，减少混乱和不一致性。

BEM介绍就到这里啦，接下来我们开始WeUi

weui实战

首先我们来看例子

一步一步拆分命名

首先整个我们叫为page,我们将这个页面看成上下两部分

一般我们利用__hd(head) __bd(body) __ft(front)来划分三同级块
我们将上部分分为page__hd,下部分为page_bd
但是这里我们分为两部分，所以只需要使用__hd , __bd

将page__hd 又分为page__title page__desc
当我们分page__bd时，我们发现新组件，接下来我们看看怎么分吧。

我们又可以用__hd,bd,ft来划分三同级块，如图 weui-panel__hd weui-panel__bd weui-panel__ft

这里标题二跟标题一内容相同，所以我们这里不用划分，直接复制一份weui-panel__bd 就可以了。

现在我们发现__bd里可以划分，我们又碰到了一个新的组件，用a标签可以跳转。

我们又可以使用 hd,bd来划分，是不是很方便呢 weui-media-box__hd weui-media-box__bd

我们整体的结构已经写好了，小伙伴们不要忘了，想要实现这个例子还得将css写完，接下来我贴上一份结构源代码，css就由大家自行完成。

<!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">
    <style>
        .box{
            width: 100px;
            height: 100px;
            /* border: 2px solid red; */
            /* background-color: red; */
            /* 轮廓 看过去和border一样，但是不占用空间 */
            /* outline: 2px solid red; */
        }
    </style>
</head>
<body>
    <!-- <div class="box"></div>
    <input type="text"> -->
    <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 组件 -->
                    <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__thumb">
                        </div>
                        <div class="weui-media-box__bd">
                            <strong class="weui-media-box__title">标题一</strong>
                            <p class="weui-medoa-box__desc">
                                由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                            </p>
                        </div>
                    </a>
                </div>
                <div class="weui-panel__ft">
                    <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__thumb">
                        </div>
                        <div class="weui-media-box__bd">
                            <strong class="weui-media-box__title">标题一</strong>
                            <p class="weui-medoa-box__desc">
                                由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。
                            </p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

总结

我们学会了BEM命名规范之后，以后再也不用为了命名而绞尽脑汁的去想单词了，而且如果我们使用BEM，能够快速理解代码结构。通过使用块、元素和修饰符，类名反映了元素之间的关系，从而提供了更好的可读性

今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧

BEM命名规范——weui实战

前言

BEM命名

为什么要使用BEM

weui实战

一步一步拆分命名

总结

热门文章

最新文章

相关电子书