css 命名规则 BEM!

随着CSS的发展，使用CSS有语义化的命名约定和CSS层的分离，将有助于它的可扩展性，性能的提高和代码的组织管理。著作权归作者所有。

BEM本质应该是一个css命名方案，最流行的命名规则之一就是BEM，（block：块，Element：元素，Modifier：修饰符），通过给每个元素添加它的父级block模块作为前缀，使得目标的安全性变得更加简单了；BEM还有助于消除页面和body类对嵌套或者附加样式依赖；BEM是一个非常有用，强大和简单的命名规范，使您的前端代码更容易阅读和理解，更容易使用，更容易扩展，更强大和更明确，更严格。

BEM特点：

1. 复杂甚至稍显冗长的类名极大减少了类名重复的可能性
2. 每个块里的一类元素的样式对应一个类名。如此，一类元素对应一个类名，减少了子选择器或后代选择器的使用，提升了css的性能。
3. css类名的命名更加语义化，更容易读懂
4. 可复用性高，例如我们可以把主题类名form--theme-xmas替换，即可对应替换为别的主题样式

.block {}

.block__element {}

.block--modifier {}

上面的例子展示了BEM项目的类结构，下划线（ __ ）被用来区分元素，而用连字符( -- )是用来修饰元素的。

BEM规范详解

1.Element

一个模块独立的实体。

命名规范：

字母+数字或者下划线组成，例：.block

2.Element

一个元素是块的一部分，具有某种功能。元素是依赖上下文的：它们只有处于他们应该属于的块的上下文中时才是有意义的。

命名规范：

元素名称可以包含拉丁字母，数字，破折号和下划线。 CSS类名写成块名称加上两个下划线加上元素名称：.block__elem

3.Modifier

修饰符是块或元素上的标志。这些标志用来形容元素或块的外观、行为或状态。例如button、a标签上的active状态。

命名规范：

修饰符名称可以包含拉丁字母，数字，破折号和下划线。 CSS类名写成块或元素的名称加上两个破折号：.block--mod或.block__elem--mod和.block--color-black。

例如：

html

<form class="form form--theme-xmas form--simple">

  <input class="form__input" type="text" />

  <input class="form__submit form__submit--disabled" type="submit"/>

</form>

css

.form { }

.form--theme-xmas { }

.form--simple { }

.form__input { }

.form__submit { }

.form__submit--disabled { }

正确的使用BEM命名规范：

使用less可以简化代码，提高开发效率：

.list {

  width: 12rem;

  height: 6rem;

  &__button{

    font-size: 16px;

  }

  &__input{

    background: blue;

    &--disabled{

      background: gray;

    }

  }

}

会编译成如下：

.list{

  width: 12rem;

  height: 6rem;

}

.list__botton {

  font-size: 16px;

}

.list__input {

  background: blue;

}

.list__input--disabled {

  background: gray;

}

还在为css命名犯愁吗？还在为css命名会发生冲突吗？使用BEM规范会让你的代码简介明了，清晰可见，更加容易阅读理解，更好的维护代码，提高开发效率，小伙伴们快行动起来吧!!