CSS Code復(fù)制內(nèi)容到剪貼板
- .about-title{
- margin: 0 auto 6rem; color: #333; text-align: center; letter-spacing: 4px;
- font-size: 2rem;
- }
- .achieve-title{
- margin: 0 auto 6rem; color: #fff; text-align: center; letter-spacing: 4px;
- font-size: 2rem;
- }
這兩個(gè)樣式的區(qū)別在于文字顏色的不同，我們可以將其公共的樣式提取出來，然后再分別設(shè)置其不同的樣式
CSS Code復(fù)制內(nèi)容到剪貼板
- .column-title{
- margin: 0 auto 6rem; text-align: center; letter-spacing: 4px; font-size: 2rem;
- }
- .about{
- color: #333;
- }
- .achieve{
- color:#fff;
- }
提取公用的部分，然后在頁面上分別引用column-title和about等，這樣代碼更簡潔，維護(hù)起來也更方便了。這個(gè)例子非常簡單，實(shí)際上項(xiàng)目中可能有更復(fù)雜的情況，總之就要要盡可能的DRY，盡可能的提取重復(fù)的東西。
CSS Code復(fù)制內(nèi)容到剪貼板
- .btn-primary{
- width:100px;
- height:50px;
- padding:5px 3px;
- background:#ccc;
- color:#000;
- }
- .btn-delete{
- width:100px;
- height:50px;
- padding:5px 3px;
- background:red;
- color:#fff;
- }
這兩個(gè)或者可能更多的按鈕擁有一些不同的樣式，但是它們同時(shí)擁有相同的大小樣式等，我們將其抽象的部分提取出來，結(jié)果如下：
CSS Code復(fù)制內(nèi)容到剪貼板
- .btn{width:100px;height:50px;padding:5px 3px;}
- .primary{background:red;color:#fff;}
- .delete{background:red;color:#fff;}
這樣提取公用的樣式出來，然后按鈕同時(shí)引用btn和primary等。這種做法除了減少重復(fù)的代碼精簡CSS之外，還有一個(gè)好處是復(fù)用性，如果需要增加其他額外的按鈕，只需要編寫不同的樣式，和btn配合使用即可。
CSS Code復(fù)制內(nèi)容到剪貼板
- .content h3{
- font-size:20px;
- color:#333;
- }
這樣的代碼就是內(nèi)容依賴于容器，沒有分離的代碼，也就是說h3的樣式依賴于.content容器，如果其他地方要用到相同的樣式，但是它的容器卻不是.content，那你可能就是要再寫一遍.something h3。
CSS Code復(fù)制內(nèi)容到剪貼板
- .title{
- font-size:20px;
- color:#333;
- }
關(guān)于這一點(diǎn)，我個(gè)人建議要分情況來看，像前面這個(gè)例子，它適合樣式和容器分離。但是比如下面這種情況：
CSS Code復(fù)制內(nèi)容到剪貼板
- .menu li{
- font-size:12px;
- }
這種ul，li列表的樣式，我覺的就按照我們原先的做法就可以，不一定非得給一個(gè)類給li來設(shè)定樣式，即
CSS Code復(fù)制內(nèi)容到剪貼板
- .menu-item{
- font-size:12px;
- }
這樣頁面的li標(biāo)簽需要引用menu-item類。
CSS Code復(fù)制內(nèi)容到剪貼板
- .block{}
- .block-element{}
- .block-modifier{}
- .block-element-modifier{}
BEM將頁面解析為block和element，然后根據(jù)不同的狀態(tài)使用modifier來設(shè)置樣式。 
