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

一篇关于BEM命名规范的文章

时间:2023-04-05 13:47:35 HTML5

我一直对命名感到困惑,也没有更好的命名格式。最近正好学习了BEM的命名规范。我想谈谈我自己的理解。学习,同时可以和大佬们一起学习。BEM是创建可重用组件和前端代码的非常有用的方法。它具有三个特点。使用方便,使用BEM只需要使用BEM的命名约定即可。Unity,使用独立的块和CSS选择器,可以让你的代码可重用和单元化。灵活性。使用BEM后,可以按照您喜欢的方式组织和配置方法和工具。BEM简介BEM是一种强大而简单的命名约定,它使代码更易于理解、更易于与他人协作、更易于扩展、更强大和更清晰,最重要的是,它是严谨的。BEM的命名约定允许参与网站开发的每个人都使用相同的代码库并使用一种方法。BEM就是块(Block)、元素(Element)、修改器(Modifier)。块(Block)是一个独立的页面组件,区别于其他块。它相当于网页中的一个组件Block,封装了行为、模板和样式。和其他技术。独立块可以重复使用,促进项目开发。模块可以嵌套,可以有任意层级的嵌套

都可以任意移动>>块可以在页面内、页面之间、项目之间任意移动。块被实现为独立的实体,使得更改块在页面上的位置并保持其位置和外观不变变得简单。3.一个接口可以与同一个块的多个实例元素重用。元素是模块块的重要组成部分,不能脱离模块。元素的名称用于描述其用途。一个完整的元素结构块-name__element-name,块名和元素名之间用(__)双下划线分隔。元素可以嵌套并且可以有任何级别的嵌套。元素始终是模块块的一部分。也就是说元素名不能是block__element__element结构,block__element结构是正确的。

-可以在不改变元素的情况下改变DOM结构```

```-元素始终是模块的一部分,不能单独使用。weui-tabbar模块中的以下p标签元素放在了模块外,这是不正确的。```

```-element是可选的,并不是所有模块都必须有元素修饰符(Modifier)修饰符是BEM的一个实体,它定义了块或元素的行为或外观。修改器是否可用。Modifier的本质和html的属性非常相似。由于修改器,相同的块看起来与以前不同。-修饰符的名称和模块和元素的名称使用(_)单下划线。命名模式遵循以下格式:布尔类型修饰符block-name_modifier--nameblock-name__element-name--modifier-name当元素weui-tabbar__item有一个on-type修饰符时key-value类型修饰符block-name--modifier-name--modifier-valueblock-name__element-name--modifier-name--modifier-value```当元素weui-tabbar__item测试为yes时修改```>-修饰符不能单独使用>>修饰符不能单独与模块或元素分开,修饰符应该改变实体的外观、行为或状态,而不是替换它。``````以上是我对BEM规范的理解,大家互相学习,有的还有很多不足希望大家指出。还有很多东西没有学到,以后会继续学习,提高自己。