BEM命名 css模块化解决方案

BEM Block Element Modifier

阅读

http://getbem.com/introduction/
https://cssguidelin.es/#bem-l...
https://www.w3cplus.com/css/s...
http://www.sohu.com/a/1501527...

类似

http://suitcss.github.io/
https://smacss.com/ scalable modular architecture
http://oocss.org/ object oriented

为什么要用BEM

网络发展是由模块化的目的驱动的:将项目分割成几部分以使其易于管理。Web组件
1.避免继承,并通过每个元素(如)使用独特的 CSS类提供某种范围。.my-component__list-item
2.通过将CSS 特性保持在最低水平来减少样式冲突。
3.模块化环境中绕过继承
4.嵌套选择器提高了CSS的特异性。需要变得更具体,以赢得现有的特异性。模块化上下文需要低特异性

块(block)

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

<div class =“block”> ... </div>
.block {color:#042; }

元素(element)

块的一部分,没有独立的含义,在语义上与块相关联
任何元素都被语义绑定到它的块。
menu__item,list__item,checkbox__caption,header__title,menu__elements

<div class =“block”>
      ...
    <span class =“block__elem”> </ span>
</div>
.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

<div class="block block--mod">...</div>
<div class="block block--size-big block--shadow-yes">...</div>

例子(Example)

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>
.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }
<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search" class="site-search__button">
</form>

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;
    }

  }

}

相关推荐