抖音负一屏常用功能

--- theme: channing-cyan --- # 前言 > 在当今快速迭代的Web开发领域，构建可维护、可扩展且适应性强的用户界面成为了每个前端工程师面临的挑战。随着项目规模的扩大和团队成员的增加，如何确保代码的一致性、提升组件的重用率，以及加快新成员的融入速度，成为提升开发效率的关键因素。正是在这样的背景下，BEM（Block Element Modifier）这一革命性的前端开发方法论应运而生。 # 正文 ## 什么是BEM BEM（Block Element Modifier）是一种前端开发中用于组织CSS类名的命名约定，由Yandex公司提出。该方法论旨在提高代码的可维护性、可扩展性和团队协作效率，尤其适用于大型项目和组件化开发。BEM的核心理念围绕着三个基本概念展开： ### 1. Block（区块） - **定义**：一个Block是页面上的一个独立功能单元或者一个可复用的组件。它能够独立存在并完成一定的功能，比如导航栏、卡片、按钮等。 - **命名示例**：`.header`、`.form`、`.product-grid` ### 2. Element（元素） - **定义**：Block内的组成部分，没有独立的意义，依赖于其所属的Block。Elements不能脱离Block单独使用。 - **命名示例**：`.header__logo`、`.form__input`、`.product-grid__item` - **规则**：Element名称通过双下划线`__`连接到其所属的Block名称，表明了Element与Block之间的归属关系。 ### 3. Modifier（修饰符） - **定义**：用于描述Block或Element的不同状态或变体，比如颜色变化、大小变化、激活状态等。 - **命名示例**：`.button--primary`、`.list-item--selected`、`.modal--open` - **规则**：Modifier名称通过两个连字符`--`附加到Block或Element名称之后，用来表示状态或样式的变化。 ### BEM的优势 - **提高可维护性**：清晰的命名规则使得代码易于理解和维护，即使是新加入项目的开发者也能快速定位和修改样式。 - **便于复用**：Block的高内聚低耦合特性支持跨项目复用，Element和Modifier的灵活性允许在不同上下文中调整样式。 - **减少选择器的嵌套**：鼓励扁平化的CSS结构，减少因过度嵌套而导致的性能问题和选择器的复杂度。 - **促进团队协作**：统一的命名规则减少了沟通成本，团队成员可以遵循相同的编码规范，协同工作更加高效。 # 了解了BEM的命名规范，我们来实战一下！

## 我们来试着写一写这个抖音的界面 ### 我们先来分析一下这个界面：这一模块是抖音应用中的常用功能（function），所以我们可以命名为`dy-fc` 总体布局可以分为上下两部分，我们可以将顶部模块当成头部命名为`dy-fc__hd` 而下面的各个功能的模块我们当作身体命名为`dy-fc__bd` 将顶部模块中的标题模块命名为`dy-fc__title` 将下面每个功能模块命名为`dy-fc__item` #### 这样我们就该界面分析完了，并以BEM的命名规范进行命名 ![A12601C4F834C2467C202FF5F9C8AF99.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c3062e5f9634348b54b55457df9e4d0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1376&h=1005&s=136943&e=jpg&b=ffffff) ### 开始写代码！ ```html

常用功能

我的钱包

券包

小程序

观看历史

内容偏好

离线模式

设置

稍后再看

``` #### 这个界面基本的结构就是这样的，然后我们来写一下它的样式首先重置默认样式 ```css * { margin: 0; padding: 0; } ``` 接着我们给整个界面设为暗白色，初始化``标签 ```css body { background-color: rgba(211, 209, 209, 0.25); } a{ text-decoration: none; } ``` 然后我们设置一下整个模块的样式:\ 设置宽占比为94%，\ 设置外边距为10px并居中\ 将背景颜色设为白色\ 调整边角弧度 ```css .dy-fc { width: 94%; margin: 10px auto; background-color: #fff; border-radius: 10px; } ``` 再然后是设置头部模块和标题 ```css .dy-fc__hd { padding: 10px; } .dy-fc__title { font-size: 18px; font-weight: bold; } ``` 继续是身体模块\ 我们将其设置为弹性容器并定义换行属性，使容器内的元素能够按行或列排列，并且可以自动换行、自动调整元素的位置和大小。它使得布局更加灵活和方便。 ```css .dy-fc__bd { padding: 10px; display: flex; flex-wrap: wrap; } ``` 随后是各个功能模块，我们将宽度设置为33%，使得三个为一行 ```css .dy-fc__item { width:33%; text-align: center; line-height: 2.1em; color: black; padding-bottom: 10px; } ``` 再然后就是图片和底部文字的样式啦 ```css img { width: 30px; height: 30px; } .dy__desc { font-size: 14px; font-weight: bold; font-family: sans-serif; } ``` ### 这样我们就完成了抖音常用功能的实战页面 # 上图片！ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb3c99501a6b47a887e8f618149b48cd~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=508&h=983&s=28389&e=png&b=f7f7f7) # 总结在实际应用中，可以根据项目规模和需求灵活调整BEM的严格程度，例如引入简写规则或使用工具自动处理类名生成。结合现代前端框架和工具（如Vue、React的CSS Modules或SASS的嵌套规则）可以进一步简化BEM的编写过程，同时保持其核心优点。 BEM不仅仅是一种命名方式，更是一种思维方式，它帮助开发者从模块化和可维护性的角度去设计和构建界面，是现代前端开发不可或缺的一部分。 ### 附源代码： ```html 抖音负一屏常用功能