关于css:CSS架构之BEM设计模式

为什么须要 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 命名懊恼