學習CSS你必須踩得那些坑（三）

BEM

BEM 其實很簡單，有點面向對象編程的意思，不過比OOP還簡單直接。只要記住，BEM是由Block(塊)，Element(元素)，Modifier(修飾符)組成，__鏈接Element，--鏈接Modifier；你把代碼按照模塊來組織。舉個例子：

.person{}

.person__avatar{}

.person__avatar--round{}

咱們有一個person的Block，每一個人都有頭像、名字、描述之類的，因此咱們用到.person__element；頭像咱們可能須要方的、圓的……都須要對這些進行單獨設置，因此這時候對每一個元素就用到Modifier。代碼很是扁平是否是，若是按照咱們之前的寫法，可能就是這樣：

.person{}

.person .avatar{}

.round{}

好像除了長一點，沒什麼區別呀！
那如今加一個動物，加個狗吧：

.dog{}

.dog .avatar{}

.round{}

如今有我的養了一條狗，咱們的HTML是這樣：

<div class  = "person">

    <div class = "avatar"></div> <!-- 人頭 -->

        …

 

    <!-- dog -->

    <div class = "dog">

        <div class = "avatar round"> <!-- 狗腦 -->

    </div>

</div>

有沒有暈乎乎的感受，這兩個avatar是同樣的仍是不同的，到底應用了哪條樣式，還有沒有公共的樣式+_+？（模塊這個東西看起來很懸，不一樣人理解可能也有誤差，可是你只要用着舒服就好了，寫多了，你就知道到底怎麼按模塊化來寫代碼了）