BEM 就是 Block, Element, Modifier

Block (块)

简单来说就是 一个整体 比如我有一个登录框，那这整个登录框就是一个block

• xxx或xxx-xxx 总之就是用 - 连接单词
  如： 'header-nav' 'main-content' 'box'

<form class='login-form' method='' action=''>
...
</form>

Element (元素)

元素必须且只能放在block里，反之block不能被元素包裹，如果整个登录框是block，那么登录框里面的一个输入框或者一个按钮就是element

• 在block名后面写两个下划线 __，表示为element
• element 不能单独使用
• element 可以相互嵌套
• element 的命名只能直接隶属于block，比如login-form__content__input这样就不行

<form class='login-form' method='' action=''>
<div class='login-form__box'>

<input class='login-form__input-usr' type='text' >
<input class='login-form__input-psw' type='number' >
<button class='login-form__login'>Login</button>

</div>
</form>

Modifier (修饰符)

一种定义block或者element的 外观、状态、行为 的符号

• 修饰符在命名最后面写一个下划线 _，如
  login-form__input_active login-form__login-primary
• 修饰符描述外观 如_size_s _theme_dark
  描述状态 如_disabled _focused _warning _success

<form class='login-form' method='' action=''>
<div class='login-form__box'>

<input class='login-form__input-usr_focused' type='text' >
<input class='login-form__input-psw_disabled' type='number' >
<button class='login-form__login'>Login</button>

</div>
</form>