为什么须要CSS架构？

其实在日常开发CSS当中，会遇到许多的问题，应用设计模式可能很好的解决。例如在日常开发我的项目，须要组件化时，组件外部的class款式类治理就十分的芜杂。 大部分公司的命名规定还是只有大小驼峰、应用英文等这些根底的命名规定。常常会本人都忘了本人命名的css是啥，应用设计模式就能很好的解决该问题。

CSS架构也能让html与css更好的解耦，能更好的抽取款式中可复用的局部，使你的html代码更具语义，也合乎了HTML5中想让日常开发更具备语义化的理念。理解这些设计模式无疑会使css代码更具模块化，块款式不依赖于页面上的其余元素，因而也较好的防止了遇到级联问题。多人合作的时候，也能高效防止命名反复问题。最重要是提取精髓，灵便利用，更加的标准规模化，在达到提高效率的同时兼顾性能。

最重要的是，不必再为命名CSS搜索枯肠了。

BEM的简介

BEM就是：

  • B代表：Block（块），独立实体，独立的意义，每个页面都能够看做是多个Block组成,见下图1-1；
  • E代表：Element（元素），block 的一部分，没有独立意义，是组件下的一个元素，多个元素造成一个组件，见下图1-2；
  • M代表： Modifier （修饰符），block 或 element 上的标记，是形容Block或Element的属性或状态，同一Block或Element能够有多个Modifier。

BEM全称BlockElementModifier是由Yandex（俄罗斯最驰名的互联网企业）的开发团队提出的前端开发实践。通过Block、Element、Modifier来形容页面，通过 _ 与 -- 连贯 ，要害就是为了解决多人合作的命名问题。


<p align=center>[1-1.block图解]</p>


<p align=center>[1-2.Element图解]</p>

BEM的根底应用

模块block（）

没有前缀，多个单词用 - 连贯，是对一个组件名形象。

例如：

 //一个一般列表的a标签 <li><a class='li-a'>...</a></li>  //一个在导航栏的a标签 <li><a class='nav-li-a'></a></li>  //一个被选中的在导航栏的a标签 <li><a class='nav-li-a is-active'></a></li>  //一个在头部的图片 <header>    <img class="header-img" src="#" alt="#"> </header>

元素Element

元素在模块之后，能够有多个层级，以 __ 连贯。element 也不是死板的，是依据具体的需要演变的，两头也能够应用 - 来演变。
<li class="nav--main__item  js-nav--main__item"><a>...</a></li><li class="nav--main__item  js-nav--main__item"><a>...</a></li><li class="nav--main__item  js-nav--main__item"><a>...</a></li>
 //几个一般列表的a标签 <li>   <a class='li-a__item'>...</a>   <a class='li-a__item'>...</a>   <a class='li-a__item'>...</a>  </li> //几个在导航栏的a标签 <li>   <a class='nav-li-a__item'></a>   <a class='nav-li-a__item'></a>   <a class='nav-li-a__item'></a> </li>

润饰Modifier

某元素、或者某模块特地的状态，必须有一个状态名和状态值，应用 _ 链接

次要针对的是 Block 自身,是对于Block做润饰。例如有：

  • 色彩
  • 大小
  • 用处

案例：

 //一个用作logo的图片 <header>    <img class="header-img_logo" src="#" alt="#"> </header>

应用BEM的益处

  • 使html代码更具语义
  • 使css代码更具模块化
  • 多人合作的时候，也能高效防止命名反复问题
  • 更加的标准规模化
  • 加重CSS命名懊恼