BEM思想 1. 什麼是BEM: BEM:(Block塊,Element元素,Modifier修飾符)一種命名規範, 其核心思想是將頁面拆分成一個個獨立的富有語義的塊（blocks）,從而使得團隊在開發複雜的項目變得高效，並且十分有利於代碼復用，即便團隊引入新成員，也容易維護。 基本命名模式 blo ...
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之間是相互獨立的，頁面是由組件組合而成，而組件與組件之間是相互組合，而不是依賴
