在CSS中,什么是BEM命名约定?back

发布于 2024-04-15  139 次阅读  共 766 字


BEM(Block, Element, Modifier)命名约定是一种帮助开发者创建可重用组件和直观代码的方法,特别是在大型项目中,以便于维护和协作。这种命名方法起源于Yandex,其目的是通过明确的命名策略来减少样式表的复杂性。BEM的核心思想在于将界面分解为独立的块(blocks)和它们的子元素(elements),并通过修饰符(modifiers)来表达这些元素的不同状态或版本。

BEM的三个主要组成部分:

块(Block):

表示一个独立的、功能性的独立模块,它可以是简单或复合的,但应该是可重用的。例如:header、container、menu。

元素(Element):

块的一部分,意义上依赖于块,并且没有独立的用途。元素通过两个下划线与其块名连接表示,如:block__element。

例如,在块menu中,元素可以是menu__item或menu__link。

修饰符(Modifier):

用来表示块或元素的不同状态、变种或版本。修饰符通过两个连字符表示,附加在块或元素名称之后,如:block--modifier 或 block__element--modifier。

例如:button--large 表示大号按钮,menu__item--active 表示活动状态的菜单项。

BEM的优势:

模块化:BEM鼓励定义独立的块和元素,从而促进了模块化和组件化的开发。

重用性:通过独立的块,可以在不同的地方重用相同的代码,而不必担心样式冲突。

可维护性:BEM的明确结构使得代码更易于理解和维护。

可扩展性:由于清晰的命名约定,增加新的样式或修改现有样式变得更为简单。

BEM的命名方法虽然提供了很多优势,但也可能导致类名较长,这可能是某些开发者不喜欢使用BEM的一个原因。不过,对于大型项目和团队来说,BEM提供的结构和清晰度是非常宝贵的。