為什么需要CSS架構(gòu)狂男？

其實(shí)在日常開(kāi)發(fā)CSS當(dāng)中，會(huì)遇到許多的問(wèn)題，使用設(shè)計(jì)模式能夠很好的解決避消。例如在日常開(kāi)發(fā)項(xiàng)目，需要組件化時(shí)召夹，組件內(nèi)部的class樣式類(lèi)管理就非常的雜亂岩喷。 大部分公司的命名規(guī)則還是只有大小駝峰、使用英文等這些基礎(chǔ)的命名規(guī)則监憎。經(jīng)常會(huì)自己都忘了自己命名的css是啥纱意，使用設(shè)計(jì)模式就能很好的解決該問(wèn)題。

CSS架構(gòu)也能讓html與css更好的解耦鲸阔，能更好的抽取樣式中可復(fù)用的部分偷霉，使你的html代碼更具語(yǔ)義，也符合了HTML5中想讓日常開(kāi)發(fā)更具有語(yǔ)義化的理念褐筛。了解這些設(shè)計(jì)模式無(wú)疑會(huì)使css代碼更具模塊化类少，塊樣式不依賴(lài)于頁(yè)面上的其他元素，因此也較好的避免了遇到級(jí)聯(lián)問(wèn)題渔扎。多人協(xié)作的時(shí)候硫狞，也能高效避免命名重復(fù)問(wèn)題。最重要是提取精華晃痴，靈活應(yīng)用残吩，更加的規(guī)范規(guī)模化倘核，在達(dá)到提高效率的同時(shí)兼顧性能泣侮。

最重要的是，不用再為命名CSS絞盡腦汁了紧唱。

BEM的簡(jiǎn)介

BEM就是：

• B代表：Block（塊）活尊，獨(dú)立實(shí)體，獨(dú)立的意義漏益，每個(gè)頁(yè)面都可以看做是多個(gè)Block組成,見(jiàn)下圖1-1酬凳；
• E代表：Element（元素），block 的一部分遭庶，沒(méi)有獨(dú)立意義宁仔，是組件下的一個(gè)元素，多個(gè)元素形成一個(gè)組件峦睡，見(jiàn)下圖1-2；
• M代表： Modifier （修飾符）榨了，block 或 element 上的標(biāo)記，是描述Block或Element的屬性或狀態(tài)龙屉，同一Block或Element可以有多個(gè)Modifier满俗。

BEM全稱(chēng)BlockElementModifier是由Yandex（俄羅斯最著名的互聯(lián)網(wǎng)企業(yè)）的開(kāi)發(fā)團(tuán)隊(duì)提出的前端開(kāi)發(fā)理論。通過(guò)Block作岖、Element唆垃、Modifier來(lái)描述頁(yè)面痘儡，通過(guò) _ 與 -- 連接 ，關(guān)鍵就是為了解決多人協(xié)作的命名問(wèn)題沉删。

<p align=center>[1-1.block圖解]</p>

<p align=center>[1-2.Element圖解]</p>

BEM的基礎(chǔ)使用

模塊block（）

沒(méi)有前綴渐尿，多個(gè)單詞用 - 連接，是對(duì)一個(gè)組件名抽象矾瑰。

例如：

 //一個(gè)普通列表的a標(biāo)簽
 <li><a class='li-a'>...</a></li>
 
 //一個(gè)在導(dǎo)航欄的a標(biāo)簽
 <li><a class='nav-li-a'></a></li>
 
 //一個(gè)被選中的在導(dǎo)航欄的a標(biāo)簽
 <li><a class='nav-li-a is-active'></a></li>
 
 //一個(gè)在頭部的圖片
 <header>
    <img class="header-img" src="#" alt="#">
 </header>

元素Element

元素在模塊之后砖茸，可以有多個(gè)層級(jí)殴穴，以 __ 連接。element 也不是死板的推正，是根據(jù)具體的需求演變的，中間也可以使用 - 來(lái)演變再沧。

<li class="nav--main__item  js-nav--main__item"><a>...</a></li>
<li class="nav--main__item  js-nav--main__item"><a>...</a></li>
<li class="nav--main__item  js-nav--main__item"><a>...</a></li>

 //幾個(gè)普通列表的a標(biāo)簽
 <li>
   <a class='li-a__item'>...</a>
   <a class='li-a__item'>...</a>
   <a class='li-a__item'>...</a>
  </li>
 //幾個(gè)在導(dǎo)航欄的a標(biāo)簽
 <li>
   <a class='nav-li-a__item'></a>
   <a class='nav-li-a__item'></a>
   <a class='nav-li-a__item'></a>
 </li>

修飾Modifier

某元素尊残、或者某模塊特別的狀態(tài)炒瘸，必須有一個(gè)狀態(tài)名和狀態(tài)值寝衫，使用 _ 鏈接

主要針對(duì)的是 Block 本身,是對(duì)于Block做修飾。例如有：

• 顏色
• 大小
• 用途

案例：

 //一個(gè)用作logo的圖片
 <header>
    <img class="header-img_logo" src="#" alt="#">
 </header>

使用BEM的好處

• 使html代碼更具語(yǔ)義
• 使css代碼更具模塊化
• 多人協(xié)作的時(shí)候隘截，也能高效避免命名重復(fù)問(wèn)題
• 更加的規(guī)范規(guī)男谖福化
• 減輕CSS命名煩惱