BEM Block Element Modifier

阅读

https://www.w3cplus.com/css/s...
类似
https://smacss.com/ scalable modular architecture
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>...</div> <div>...</div> 例子（Example） <form> <input type="text" /> <input type="submit" /> </form> .form { } .form--theme-xmas { } .form--simple { } .form__input { } .form__submit { } .form__submit--disabled { } <form> <input type="text"> <input type="Submit" value ="Search"> </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; } } }

BEM定名 css模块化解决方案