type
status
date
slug
summary
tags
category
icon
password
这里写文章的前言：
一个简单的开头,简述这篇文章讨论的问题、目标、人物、背景是什么？并简述你给出的答案。
可以说说你的故事：阻碍、努力、结果成果，意外与转折。
📝 介绍
BEM（Block Element Modifier）是一种前端开发中常用的命名约定，旨在提高代码的可读性、可维护性和重用性。它将页面中的每个元素抽象为三种概念：块（Block）、元素（Element）、修饰符（Modifier），并使用特定的命名规则对它们进行命名。
BEM的核心概念：
- 块（Block）： 块代表一个独立的、可以复用的组件或模块，是页面上的一个独立的部分，具有独立的含义和功能。块的命名应该简洁、清晰、具有语义。
- 元素（Element）： 元素是块的组成部分，它只在块的上下文中有意义，并且不能单独存在。元素的命名应该使用块的名称作为前缀，并用双下划线分隔。
- 修饰符（Modifier）： 修饰符是用来修改块或元素的外观、状态或行为的标志，用于表示一个块或元素的不同状态或变种。修饰符的命名应该使用块或元素的名称作为前缀，并用双连字符分隔。
BEM命名规则：
- 块、元素、修饰符之间使用双下划线
__和双连字符-进行分隔。
- 块的名称应该简短、清晰、具有语义，可以使用单词、短语或缩写。
- 元素的名称应该与块的名称相关联，以确保语义的连贯性，不应该使用太具体的词语。
- 修饰符的名称应该描述其所修改的块或元素的外观、状态或行为，并与其相关联。
BEM的优点：
- 语义化：通过命名约定，提高了代码的语义化，使得代码更加清晰易懂。
- 可维护性：模块化的命名方式和结构，使得代码更易于维护和重构。
- 可重用性：独立的块和元素能够被复用，减少了重复编写样式和代码的工作量。
- 可扩展性：修饰符的使用使得可以轻松地扩展或修改组件的外观和行为。
BEM规范是一种通用的命名约定，适用于各种前端开发项目，并且被广泛应用于业界，是提高代码质量和可维护性的有效方法之一。
其他文章
- Author:GDYG
- URL:https://gdyg5.top/article/css-bem
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!