一篇关于BEM命名规范

ThreeWords 发布于2019-08-29 17:17 / 1444人阅读

摘要：是一个很有用的方法可以创建复用组件和前端代码有三个特性易用性，使用只需要使用的命名规范就可以。的简介是一个强大而简单的命名规范，使得代码更容易让人理解，容易和他人协作，容易扩展，更加强壮和明确，最重要的是严谨性。

一直以来自己对命名都是比较混乱的，并没有一个比较好的格式来命名，最近自己碰巧学习到了BEM命名规范，我想谈谈自己的理解以供自己来学习，同时也可以和各位大佬一起学习。
BEM是一个很有用的方法可以创建复用组件和前端代码
有三个特性.

易用性，使用BEM只需要使用BEM的命名规范就可以。

单元性，使用独立的块和CSS选择器，可以使你的代码可重用和单元化。

灵活性，使用BEM后，方法和工具可以按照自己喜欢的方式去组织和配置。

BEM的简介
BEM是一个强大而简单的命名规范，使得代码更容易让人理解，容易和他人协作，容易扩展，更加强壮和明确，最重要的是严谨性。
BEM的命名规范可以让参与网站开发的人都使用同一个代码库使用用一种方法。

BEM分别是块（Block），元素（Element），修饰符（Modifier）

块（Block）
是一个独立的页面组件跟其他的块区分开来，相当于网页中的组件Block封装了行为，模板，样式和其他技术。独立的Block可以复用，促进项目的开发。

模块与模块之间可以嵌套，可以有任意级别的嵌

可以任意移动

>>
    Block可以在页面内任意的移动，也可以在页面之间或项目之间移动。  
    Block作为独立的实体来实现，使得在页面上改变Block改变位置并让其位置和外观不改变的简单。  
3. 可复用  
    一个界面可以同一个Block的几个实例

元素（Element）
元素是模块Block的重要组成部分，且不能脱离模块多带带的使用

元素的名称用来描述它的目的  
一个完整的元素结构block-name__element-name,块名和元素名使用（__）双下划线分割。

元素之间是可以嵌套的

可以拥有任意级别的嵌套

一个元素总是模块Block的一部分这意味着元素名称不能为block__element__element这种结构，而block__element这种结构才是正确的。

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

``` -一个元素总是模块的一部分，不能多带带的使用。如下weui-tabbar模块里面的p标签元素放在模块外，这是不正确的。 ```

``` -元素是可选择的，不是所有模块都必须拥有元素

修饰符（Modifier）
Modifier是BEM的一个实体，它定义了block或element的行为或外观
Modifier可用可不用
Modifier本质和html的属性很相似，同一个block会因为使用Modifier而与之前看起来不一样。
-修饰符的名字与模块和元素的名字使用（_）单下划线
命名模式遵循如下格式:

Boolean类型的修饰符
block-name_modifier--name
block-name__element-name--modifier-name



当元素weui-tabbar__item有一个on类型的修饰符时

key-value类型的修饰符

block-name--modifier-name--modifier-value  
block-name__element-name--modifier-name--modifier-value
```
  

当元素weui-tabbar__item有一个yes的test的修饰符时
    
    

```
>-一个修饰符不能多带带的使用
>>一个修饰符不能脱离模块或元素多带带的使用，一个修饰符应该改变一个实体的外观，行为或者状态，而不是替换它。
```

 
    


 
    

```

以上是我经过对BEM规范学习的一些理解，大家互相学习，有很多的不足之处希望大家指出。还有很多没有学习到的东西，自己也会在未来的时间里不断学习来提高自己。

GPU云服务器云服务器一篇关于命名规范二级域名命名规范 html的命名规范

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114220.html

CSS规范--BEM入门

摘要：一开始，公司推出的，包括了规范以及其配套构建工具。代表的不同状态或不同版本。再来看一个之前用常规方式命名的的例子这些类名真是太不精确了，并不能告诉我们足够的信息。这段时间在整理前端部分的代码规范，前面提到的CSS规范里面会涉及到选择器的命名，就参考BEM的命名规范，内容整理如下，供大家参考，请斧正！如大家有兴趣，可移步至CSS编码规范 BEM是由Yandex公司推出的一套CSS命名...

li21 2019-08-29 12:49 评论0 收藏0
关于css命名的一点思考，探讨一下css命名空间的可行性

摘要：毕竟这是张鑫旭七年前的文章。命名法的意思就是块元素修饰符是由团队提出的一种前端命名方法论。但此法没有经过大型项目的考验，希望大神们来探讨一下可行性。本文主要是探讨传统项目中的css命名，vue、react等单页应用都可以使用css-module来解决这个问题作为一名初级前端，免不了要切图(写css、html静态部分)，写css最头痛的就是给class命名了，词汇有限，本人又比较懒，...

lk20150415 2019-08-29 12:36 评论0 收藏0
关于css命名的一点思考，探讨一下css命名空间的可行性

摘要：毕竟这是张鑫旭七年前的文章。命名法的意思就是块元素修饰符是由团队提出的一种前端命名方法论。但此法没有经过大型项目的考验，希望大神们来探讨一下可行性。本文主要是探讨传统项目中的css命名，vue、react等单页应用都可以使用css-module来解决这个问题作为一名初级前端，免不了要切图(写css、html静态部分)，写css最头痛的就是给class命名了，词汇有限，本人又比较懒，...

crossoverJie 2019-08-01 16:52 评论0 收藏0
css進階

摘要：栅格系统用于处理页面多终端适配的问题。它表示抓取对象以后拖放到另一个位置。目前，它是标准的一部分。精简高效的命名准则方法这篇文章发布于年月日，星期日，，归类于相关。但是不会受到包含块的限制，可能会溢出。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由...

import. 2019-08-29 14:07 评论0 收藏0