当前位置: 首页 > Web前端 > CSS

BEM——前端命名约定介绍

时间:2023-03-30 16:24:22 CSS

什么是BEM?BEM(Block,Element,Modifier)是Yandex团队提出的一种前端命名规范。它的核心思想是将页面拆分成独立的语义块(blocks),使得团队开发复杂项目的效率更高,也非常有利于代码复用。即使团队引入新成员,也很容易维护。在某种程度上,BEM和OOP是相似的。BlockBlock是逻辑上和功能上独立的单元,类似于组件。每个块都包含自己的行为(js)、结构(HTML模板)和性能(css)。块的独立性有利于代码重用和项目管理。块特征1.块名称描述了块的功能(“它是什么?”——菜单或按钮),但不包括它的状态(“它看起来像什么?”——红色或大)。块可以嵌套和重复使用。

块可以嵌套,可以嵌套任意数量的块
2.block不影响自身Layout,也就是说不能设置margin和position属性。3、元素选择器和ID选择器不能在BEM中使用。ElementElement是块的组成部分,不能脱离块使用。元素特性1.element代表它的用途(item、文本等),而不是它的状态(red、big等)。2.元素命名方式:block-name__element-name。元素名和块名是双下划线分隔的。Search元素用法-nested元素可以嵌套在每个其他Set,嵌套数量任意。element只能是block的一部分,也就是说element的命名层次不能是block__elem1__elem2。搜索
Searchblock决定了命名空间,确保elements不被其他block影响。block中的element在css中不需要跟block一起使用,而是独立定义规则。这样在修改bolck的结构时就不需要修改css了。.block{}.block__elem1{}.block__elem2{}.block__elem3{}块的结构发生变化,但元素的规则及其名称保持不变。Element和blockelementy的关系只能作为block的一部分,不能使用独立地。SearchSearch块不一定包含元素。Search什么时候用Element,什么时候用block使用block:如果一段代码可能被复用,并且不依赖于其他页面组件正在实施。创建元素:如果一段代码在没有父实体(块)的情况下不能单独使用。ModifierModifier定义块和元素的外观、状态或行为。ModifierFeatureModifier表示它的性能(“什么尺寸?”或“哪个主题?”等等——size_s或theme_islands)、它的状态(“它与其他的有何不同?”——禁用、聚焦等)及其行为(“它的行为如何?”或“它如何响应用户?”——例如directions_left-top)。修饰符命名方法:用单下划线分隔块或元素。修饰符类型:BooleanSearchmodifier类型:Key-value搜索修饰符不能单独使用搜索Searchfile组织结构BEM理论也可以应用到项目目录的组织结构中。块、元素和修饰符将被分成独立的文件。特点:1.单个块对应单个目录。2.块与目录同名。例如,标题块在header/目录中,菜单块在menu/目录中。3.一个块的实现被分成单独的技术文件。例如header.css和header.js。4.块目录是其元素和修饰符的子目录的根目录。5.元素目录的名称以双下划线(__)开头。例如,header/__logo/和menu/__item/.6。修饰符目录的名称以单个下划线(_)开头。例如header/_fixed/和menu/_theme_islands/.7.元素和修饰符的实现分为单独的技术文件。例如header__input.js和header_theme_islands.css.search-form/#search-form的目录__input/#search-form的子目录__inputsearch-form__input.css#search-form__input元素的CSS实现search-form__input.js#search-form__inputelement__button/的JavaScript实现js_theme/#search-form_theme的子目录#修饰符search-form_theme_islands.css#搜索表单块的CSS实现#具有值为#islands的主题修饰符search-form_theme_lite.css#搜索表单的CSS实现具有主题修饰符和值的块##litesearch-form.css#搜索表单块的CSS实现search-form.js#搜索表单块的JavaScript实现参考更多