代码拉取完成，页面将自动刷新
Block是一个组件名称，可以与其他Block互相嵌套
<!-- `header` block -->
<header class="header">
<!-- Nested `logo` block -->
<div class="logo"></div>
<!-- Nested `search-form` block -->
<form class="search-form"></form>
</header>
PS：有人会疑惑 search-form哪部分才是block，其实它整一个就视作为一个block，从而我们可以推断出block可以用连字符-来表示一个比较复杂的组件名称
element描述了它在block中充当什么角色,它是block的一部分，不能与其分开，格式：Block-name__Element-name
element与block之间用爽下划线__分隔，同样的Element-name也是可以用连字符-来表示一个复杂的元素名称，而且元素也可以彼此嵌套
元素总是块的一部分，而不是另一个元素。这意味着元素名称不能定义层次结构block__elem1__elem2。
<!-- `search-form` block -->
<form class="search-form">
<!-- `input` element in the `search-form` block -->
<input class="search-form__input">
<!-- `button` element in the `search-form` block -->
<button class="search-form__button">Search</button>
</form>
PS: element具有可选性，并不是所有的block都需要element,例如：
<!-- `search-form` block -->
<div class="search-form">
<!-- `input` block -->
<input class="input">
<!-- `button` block -->
<button class="button">Search</button>
</div>
定义block或element的外观，状态或行为
modifier描述:
size，theme等）disabled，focused等）left,top等）_与block或element分隔开，它不能单独使用PS：有些人会使用双连字符--来连接modifier，不过BEM的官方解释称：双连字符被解释为注释的一部分，这会在文档验证期间导致错误
更详细的可以看
https://en.bem.info/methodology/naming-convention/#two-dashes-style
