BEM命名|BEM命名 css模块化解决方案 BEM命名css模块化解决方案

BEM Block Element Modifier

阅读
http://getbem.com/introduction/
https://cssguidelin.es/#bem-like-naming
https://www.w3cplus.com/css/starting-css.html
http://www.sohu.com/a/150152755_99903057

类似
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

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

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

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

修饰（modifier）
【BEM命名|BEM命名 css模块化解决方案】块或元件上的标志。
用它们来改变外观，行为或状态
.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; }}}