Bem命名

BEM思想
1. 什麼是BEM:
　　BEM:(Block塊,Element元素,Modifier修飾符)一種命名規範,
　　　　其核心思想是將頁面拆分紅一個個獨立的富有語義的塊（blocks）,從而使得團隊在開發複雜的項目變得高效，而且十分有利於代碼複用，即使團隊引入新成員，也容易維護。
　　　　基本命名模式
　　　　　　block{},
　　　　　　block__element{},
　　　　　　block--modifier{},
2. BEM各元素:
　　* Block ：Block是邏輯和功能獨立的單元，相似於組件。每一個block包含自身的行爲（js）、結構（HTML模板）、表現（css）。block的獨立性有利於代碼的複用，有利於項目管理。
　　　　特色：

　　　　　　+ block名描述block功能，不包括狀態，能夠複用，嵌套
　　　　　　+ block不影響自身佈局，因此就不能設置margin，position屬性
　　　　　　+ 不在Bem中使用元素選擇器，和id選擇器
　　　　　　+ 在同一頁面中不依賴於其餘block或element；

　　　　例子:

　　　　　　<button class="button" />
　　　　　　<button class="button button--success"/>
　　　　　　<button class="button button--danger"/>
　　* Element: Element是Block的組成部分，不脫離Block使用，嵌套使用，可嵌套多個數量，相互嵌套
　　　　特色：

　　　　　　+ element表示目的(item,text...),而不是狀態(red,disabled...)
　　　　　　+ element的命名方式：block-name__element-name,使用雙下劃線鏈接block名和element名
　　　　例子:
　　　　　　<form class="search-form">
　　　　　　　　<input class="search-form__input"/>
　　　　　　</form>
　　　　與block的聯繫:
　　　　　　+ block肯定命名空間，確保element不會被其餘block影響
　　　　　　+ element只能做爲block的一部分使用，不可獨立使用
　　　　　　　　例子：
　　　　　　　　　　error:
　　　　　　　　　　<form class="search-form__input"/>
　　　　　　　　　　<button class="search-form__button"/>
　　　　　　+ block不必定含有element

　 * Modifier ：修飾符，用以展現狀態，表現（size,color,...），用它們來改變外觀或行爲。
　　　　使用雙中劃線和block或element相連，
　　　　例子：
　　　　　　<form class="search-form">
　　　　　　　　<input class="search-form__input">
　　　　　　　　<button class="search-form__button search-form__button--disabled">
　　　　　　</form>
　　　　*Modifier不單獨使用，使用時須要對應的block或element*
3. Bem展現的思惟方式：
　　　　Bem將頁面分爲多個block組成，其下同時是有多個element構成，每一個element,block之間是相互獨立的，頁面是由組件組合而成，而組件與組件之間是相互組合，而不是依賴