WEUI也遵守的命名准则--BEMBEM(Block Element Modifier) 一种广泛使用的前端命名规范，由

虽然我们在命名类名的时候，可以随心所欲，但是在大型项目中，代码量很多的情况下，即使是最简单的类名的命名规范，也要遵守一定的规则，今天就简单的分享一下，BEM命名规范。

BEM(Block Element Modifier)

一种广泛使用的前端命名规范，由Yandex开发推广，目的是创建可以复用、可维护的CSS类名。

BEM命名规范，用明确的命名约定，来帮助开发者将CSS类和DOM结构的关系理解的很清晰，从而提高了代码的可读性和维护性。

基本概念

块(Block)

一个个独立的、可以重复使用的UI组件。例如，一个按钮、菜单或者一个表单。

元素(Element)

Block内部的子组件。例如在一个.header(Blcok)中，在它的后面加上两个底杠__，.header__logo来表示它的logo部分。

修饰符(Modifier)

改变Block或者Element的外观、行为或者状态的类。例如.theme--night表示夜间主题。

命名规则

Block类名： blockname
Element类名： blockname__elementname
Modifier类名： blockname--modname或者blockname__elementname--modname

html示例

这里我们用一个导航栏来体验一下这种命名规则体现出的DOM结构关系。在工作的时候大多数用的是组件开发，这里作为BEM的规则，稍微简单一点的例子，或许更好的学习。

HTML结构：

 <body>
      <div class="comments comments--unread">
        <div class="comments__list">
          <div class="comment">
            <div class="comment__author">评论用户一</div>
            <div class="comment__content">评论内容</div>
          </div>
          <div class="comment comment--unread">
            <div class="comment__author">评论用户二</div>
            <div class="comment__content">评论内容</div>
          </div>
        </div>
      </div>
    </body>

CSS样式：

.comments {
  border: 1px solid #ccc;
  padding: 1rem;
}
.comments--unread {
  border-color: red;
}
.comments__list {
  list-style: none;
  padding: 0;
}
.comment {
  margin-bottom: 1rem;
}
.comment__author {
  font-weight: bold;
}
.comment__content {
  margin-top: 0.5rem;
}
.comment--unread .comment__author {
  color: red;
}

Block：comments和comment都是独立的组件，comments表示整个评论列表，而comment表示单个评论。
ELement：comments__list和comment__author与comment__content都是其Block的组成成分。comments__list 是 comments Block 的一部分，而 comment__author 和 comment__content 是 comment Block 的组成部分。
Modifier:comments--unread和comment-unread用于表示“未读”的状态。comments--unread 应用于 comments Block 表示整个列表至少有一条评论未读，而 comment--unread 应用于单个 comment Block 表示该评论未读。

最后我们一起来看一下WEUI的源代码吧！

让我们从开始就遵守标准规范，自然而然地就能和日常工作开发没有什么区别。