BEM Block Element Modifier

阅读

类似

scalable modular architecture

object oriented

为什么要用BEM

网络发展是由模块化的目的驱动的：将项目分割成几部分以使其易于管理。Web组件

1.避免继承，并通过每个元素（如）使用独特的 CSS类提供某种范围。.my-component__list-item2.通过将CSS 特性保持在最低水平来减少样式冲突。3.模块化环境中绕过继承4.嵌套选择器提高了CSS的特异性。需要变得更具体，以赢得现有的特异性。模块化上下文需要低特异性

块（block）

独立的实体，它本身是有意义的。

虽然块可以嵌套和相互作用，在语义上，他们保持平等; 没有优先级或层次结构。仅使用类名称选择器没有标签名称或ID不依赖页面上的其他块/元素header，container，menu，checkbox，input，logo,button

    
      ... 
    
.block {color：＃042; }

元素（element）

块的一部分，没有独立的含义，在语义上与块相关联

任何元素都被语义绑定到它的块。menu__item，list__item，checkbox__caption，header__title，menu__elements

    
           ...    
      
      
    
.block__elem {color：＃042; }

修饰（modifier）

块或元件上的标志。

用它们来改变外观，行为或状态.block--mod或.block__elem--mod和.block--color-black与.block--color-red。复杂修饰符中的空格被短划线代替disabled，highlighted，checked，fixed，size big，color yellow,input size big ,button theme green

    
     ...
    
    
     ...
    

例子（Example）

    
  
       
     
    
.form { }.form--theme-xmas { }.form--simple { }.form__input { }.form__submit { }.form__submit--disabled { }

Sass3.3 for BEM

.note {  color: #ffffff;  &__content {    background: white;  }  &__meta {    background: #f1f1f1;    border-top: 1px solid #eee;  }  &--featured {    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1);  }}

$module: 'note';.#{$module} {  // By default, our note has a white background…  &__content {    background: white;  }  // But “featured” notes have an offwhite background  &--featured {    .#{$module}__content {      background: #eee;    }  }}