小清新網站與BEM規範
首先看一下大名鼎鼎的BEM是什麼
BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團隊提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對其他開發者來說更加透明而且更有意義。
BEM的關鍵是可以通過名字告訴開發者這些標籤表示的是什麼意思，通過瀏覽class屬性，就能夠明白這些模組之間是如何關聯的，有一些僅僅是元件，有一些是組建的子孫或是元素，還有一些元件是其他形態或修飾符，使用這些常規的命名方式我們可以看清程式碼之間的關聯，BEM是不是很強大呢。
- 塊
獨立的實體，它本身是有意義的。
例子 header，container，menu，checkbox，input
- 元素
塊的一部分，沒有獨立的含義，並且在語義上與其塊相關聯。
例子 menu item，list item，checkbox caption，header title
- 修改
塊或元素上的標誌。用它們來改變外觀或行為。
例子 disabled，highlighted，checked，fixed，size big，color yellow
一起來看小清新網站堆糖BEM命名例項
一般網站的結構都是由header，content，footer三部分構成，每部分用上不同的BEM
命名，網站結構就非常清晰可見了。堆糖就用了這樣的結構
<div id="header-wrap"> <div id="dt-header"> <div id="dt-wrap"> <a id="dt-logo" href="#">堆糖</a> <div id="dt-nav"></div> <div id="dt-search"></div> <div id=dt-srarch-right"></div> </div> </div> </div>複製程式碼
這裡是堆糖header部分，網站名為堆糖，可以看到這些標籤大多以dt開頭。
dt-header是指著整個堆糖的header部分
dt-wrap是header的包裹部分，這部分塊由四部分組成
- 第一部分是dt-logo，表示堆糖這個logo
- 第二部分dt-nav表示導航標籤
- 第三部分dt-search表示搜尋標籤
- 第四部分是一個大的塊，取名為dt-search-right
所以這些語義化的標籤使每個元素都清晰可見，這就是BEM。
讓我們看看堆糖推薦區的BEM命名
來看看堆糖是如何做的，這塊是一個推薦關注區，中間由ul列表組成
裡面由三個section，每個section=img+desc+follow
複製程式碼
- ul列表取名為dt-daren-list,多麼清新的名字，list修飾符表明這是一個列表
- 每個section下有不同的區塊，daren-img圖片區和daren-desc文字區和daren-follow超連結區
- 每個img下有兩個小圖示,分別命名為daren-avater和daren-avater-v
看一下小清新的一幕
複製程式碼
- dynamic-collect-article，命名為動態收集文章，這是一項。
- dynamic-collect-article-userinfo ，用修飾符userinfo表示人物資訊
- dynamic-collect-article-tag，用修飾符tag表示一個小標籤
- dynamic-collect-article-bar，用字尾修飾符bar表示底部一欄
這些應該都是常見的修飾符，類似還有icon ，label，badge等，還有一些對元素狀態修改用到的修飾符，-on等
看一下這部分的點贊收藏
<div class="de-action"><div class="action-list" data-type="article" data-id="665046"><div class="like-action one-action " data-likeid="0"><img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_kt5Rj.png"><span class="detail-text">6</span></div> <div class="favorite-action one-action " data-favoriteid="0"><img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_YizTc.png"><span class="detail-text">5</span></div><div class="more-action one-action"><img src="https://b-ssl.duitang.com/uploads/item/201804/23/20180423141044_tPCeh.png"><span class="detail-text">更多</span></div></div></div>複製程式碼
這部分的程式碼
- 這部分的內容被包含在de-action的盒子中
- action-list是整個盒子的子盒子,由like-action和favorite-action,more-action組成
- like-action 點贊區
- favorite-action 喜歡收藏區
- more-action 檢視更多區
- 其中每塊由圖片<img>和<span classdetail-text>組成，結構清晰易懂
最後如何看待BEM
- BEM還是有很多值得大家去思考的，特別是用於維護專案，或者跨團隊的開發當中，他的好處會明顯見長。
- 單元性
塊的樣式從來不依賴同頁面其它的元素，所以你永遠不會遇到級聯問題。您還可以將完成的專案中的塊轉移到新專案中。
- 重用性
不同方式組織獨立的塊，並智慧地重用它們，可以減少必須維護的CSS程式碼量。通過一系列風格指南，您可以構建一個塊庫，使您的CSS超級有效。
- 結構化
BEM方法可以使得你的CSS程式碼結構性很好，從而更加容易理解。
堆糖網在此：https://www.duitang.com/