CSS之BEM命名规范

CSS之BEM命名规范

CSS中的BEM（Block, Element, Modifier）命名规范是一种组件化的设计方式，由Yandex团队提出，旨在提高代码的可维护性和团队协作效率。其主要目的是通过将界面分解为独立的块，避免命名混乱和代码冗余，确保一致性。

在项目开发中，新手常会遇到命名随意导致的识别和一致性问题。BEM通过明确的block（块）、element（元素）和modifier（修饰符）来命名，如block__element表示块的后代，block--modifier表示块的不同状态。这样，每个组件都有清晰的身份，有助于防止样式污染和提高代码复用性。

块（Block）是功能独立的组件，如网页上的一个独立部分。每个块的名称必须唯一，如头（head）表示页面顶部。块应保持独立，不涉及外部样式，确保其移动或重用时不会影响整体布局。

元素（Element）是块的组成部分，如search-form中的input和button。元素名称描述其功能，而不是状态，避免嵌套过深。例如，可以写成.search-form__input和.search-form__button。

修饰符（Modifier）用于调整块或元素的特定状态，如按钮的大小、颜色等。但必须与块或元素结合使用，如.btn--error用于表示错误状态的按钮。

在何时使用BEM，应根据模块关联性进行判断。对于公共样式，如字体大小，BEM可能不是最佳选择。而在需要明确关联性和低耦合的样式调整时，如表单布局，BEM提供了清晰的命名方式和混合拆分样式的能力。

尽管BEM提倡低嵌套，但在需要通过块状态影响内部元素时，适度的嵌套是允许的。遵循开放封闭原则，意味着扩展（通过修饰符）而非修改（基础样式）是BEM的最佳实践。2024-08-08