总体布局可以分为上下两部分，我们可以将顶部模块当成头部命名为dy-fc__hd
而下面的各个功能的模块我们当作身体命名为dy-fc__bd
将顶部模块中的标题模块命名为dy-fc__title
将下面每个功能模块命名为dy-fc__item
这样我们就该界面分析完了，并以BEM的命名规范进行命名开始写代码！<div class="dy-fc"> <div class="dy-fc__hd"> <span class="dy-fc__title">常用功能</span> </div> <div class="dy-fc__bd"> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">我的钱包</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">券包</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">小程序</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">观看历史</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">内容偏好</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">离线模式</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">设置</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">稍后再看</p> </a> </div> </div>这个界面基本的结构就是这样的，然后我们来写一下它的样式
首先重置默认样式
{ margin: 0; padding: 0;}
接着我们给整个界面设为暗白色，初始化<a>标签
body { background-color: rgba(211, 209, 209, 0.25);}a{ text-decoration: none;}
然后我们设置一下整个模块的样式:设置宽占比为94%，设置外边距为10px并居中将背景颜色设为白色调整边角弧度
.dy-fc { width: 94%; margin: 10px auto; background-color: #fff; border-radius: 10px;}
再然后是设置头部模块和标题
.dy-fc__hd { padding: 10px;}.dy-fc__title { font-size: 18px; font-weight: bold;}
继续是身体模块我们将其设置为弹性容器并定义换行属性，使容器内的元素能够按行或列排列，并且可以自动换行、自动调整元素的位置和大小。它使得布局更加灵活和方便。
.dy-fc__bd { padding: 10px; display: flex; flex-wrap: wrap;}
随后是各个功能模块，我们将宽度设置为33%，使得三个为一行
.dy-fc__item { width:33%; text-align: center; line-height: 2.1em; color: black; padding-bottom: 10px;}
再然后就是图片和底部文字的样式啦
img { width: 30px; height: 30px;}.dy__desc { font-size: 14px; font-weight: bold; font-family: sans-serif;}这样我们就完成了抖音常用功能的实战页面上图片！
在实际应用中，可以根据项目规模和需求灵活调整BEM的严格程度，例如引入简写规则或使用工具自动处理类名生成。 结合现代前端框架和工具（如Vue、React的CSS Modules或SASS的嵌套规则）可以进一步简化BEM的编写过程，同时保持其核心优点。
BEM不仅仅是一种命名方式，更是一种思维方式，它帮助开发者从模块化和可维护性的角度去设计和构建界面，是现代前端开发不可或缺的一部分。
附源代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>抖音负一屏常用功能</title></head><style> { margin: 0; padding: 0;}body { background-color: rgba(211, 209, 209, 0.25);}a{ text-decoration: none;}.dy-fc { width: 94%; margin: 10px auto; background-color: #fff; border-radius: 10px;}.dy-fc__hd { padding: 10px;}.dy-fc__title { font-size: 18px; font-weight: bold;}.dy-fc__bd { padding: 10px; display: flex; flex-wrap: wrap;}.dy-fc__item { width:33%; text-align: center; line-height: 2.1em; color: black; padding-bottom: 10px;}img { width: 30px; height: 30px;}.dy__desc { font-size: 14px; font-weight: bold; font-family: sans-serif;}</style><body> <div class="dy-fc"> <div class="dy-fc__hd"> <span class="dy-fc__title">常用功能</span> </div> <div class="dy-fc__bd"> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">我的钱包</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">券包</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">小程序</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">观看历史</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">内容偏好</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">离线模式</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">设置</p> </a> <a href="#" class="dy-fc__item"> <img src="" alt=""> <p class="dy__desc">稍后再看</p> </a> </div> </div></body></html>
