為了排版的正確这弧，請查看我的原文：如何提高CSS的可維護(hù)性
為CSS正確的命名可以提高代碼的可讀性哄芜，便于后期查找修改。
下面記錄一些常用的手段：
命名與備注
命名是提高代碼可讀性的第一步，也是最重要的一步离唬。我接觸css的時候命名的問題困擾了我很久扰楼，尤其是我這種對英語一竅不通的人來說呀癣，當(dāng)時我就是胡亂命名的，后來看多了別人的代碼弦赖，才知道這東西是可以統(tǒng)一化的项栏。
下面是一些常規(guī)的命名（來自別人的blog，摘抄下來方便平時多看看）：
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
左右中：left right center
登錄條：loginbar
標(biāo)志：logo
廣告：banner
頁面主體：main
熱點(diǎn)：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權(quán)：copyright
滾動：scroll
內(nèi)容：content
標(biāo)簽：tags
文章列表：list
提示信息：msg
小技巧：tips
欄目標(biāo)題：title
加入：joinus
指南：guide
服務(wù)：service
注冊：regsiter
狀態(tài)：status
投票：vote
合作伙伴：partner
導(dǎo)航：nav
主導(dǎo)航：mainnav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題: title
摘要: summary
良好的備注也是同樣重要蹬竖，比如可以在不同的功能區(qū)之間加入注釋沼沈，或者是在CSS開頭加入注釋導(dǎo)航等。這個方法我是在看國外一個WordPress模板的css的時候看到的案腺，我就在某個項(xiàng)目中使用了一次庆冕，效果還是不錯的。
/**
* Table of Contents:
* A 首頁
* 1.0 - Body
* 2.0 - 頭部
* 3.0 - 導(dǎo)航區(qū)
* 4.0 - 品牌區(qū)
* 5.0 - 最新評論區(qū)
* 6.0 - 右側(cè)搜索區(qū)
* 7.0 - 右側(cè)熱門商店
* 8.0 - 熱門折扣卷
* 9.0 - Media Queries
* 10.0- Footer
* 11.0- Comments
* 12.0- Coupon-info列表頁面
* 13.0- Coupon-info內(nèi)容頁面
*/
/* A 首頁 */
/* 1.0 Body */
body {
background: #f3f3f3;
}
ul,li {
margin: 0;
padding: 0;
list-style-type: none;
}
.boder {
margin-top: 15px;
border: 1px solid #E2E2E2;
background: white;
margin-bottom: 15px;
}
.max-clear {
clear: both;
}
/* 2.0 頭部區(qū)開始*/
.logo {
float: left;
}
.banner {
margin-top: 5px;
float: right;
}
#main {
clear: both;
}
/* 頭部區(qū)結(jié)束*/
提取重復(fù)樣式
這個方法我也經(jīng)常見過劈榨，但每次真正做東西的時候访递，就忘記了這茬。經(jīng)常見到的是在一個div里有多個類同辣，如：
<div class="title black-border bold">Ruofei Blog</div>
<style type="text/css">
.title{padding: 10px 20px;width: 10%;text-align: center;}
.black-border{border: 1px #000 solid;}
.bold{font-weight: bold;}
</style>
效果如圖：
其中title類是主要定義這個div的邊距位置寬度拷姿，black-border類是專門定義一個黑色的像素的實(shí)線邊框，bold類是加粗旱函。將這三個類分離開后响巢，以后需要用到加粗的熟悉時，直接在div中加上bold類棒妨，需要加黑色實(shí)線邊框的時候直接加上black-border類即可踪古，不需要再css樣式中重復(fù)寫這些屬性，大大的減少了css的代碼量券腔。例如：
<div class="title black-border bold">Ruofei Blog</div>
<br/>
[站外圖片上傳中……(3)]
<style type="text/css">
.title{padding: 10px 20px;padding: 10px 20px;width: 10%;text-align: center;}
.black-border{border: 1px #000 solid;}
.bold{font-weight: bold;}
</style>
效果如下：
直接給img標(biāo)簽加了一個black-border類伏穆，就得到了一個和上面div一樣的邊框效果，而我并沒有在css中單獨(dú)為這個img標(biāo)簽定義邊框?qū)傩浴?/p>
我知道這個對大家來說是很正常的事情纷纫，但對我這種剛接觸前端的小白來說枕扫，真心很神奇！
書寫順序
參考的文章中提到了css的幾種書寫順序辱魁，當(dāng)然每個人有每個人的習(xí)慣烟瞧。
（1）位置屬性(position, top, right, z-index, display, float等)
（2）大小(width, height, padding, margin)
（3）文字系列(font, line-height, letter-spacing,color- text-align等)
（4）背景(background, border等)
（5）其他(animation, transition等)
自己的一點(diǎn)小感悟
當(dāng)我看到這里的時候诗鸭，我突然覺得，上一點(diǎn)提取重復(fù)樣式完全可以按照這種分類去歸類参滴，相同類型的css分離成一個類强岸，后面即可重復(fù)調(diào)用坟瓢，喳逛。
<div class="title black-border font-bold">Ruofei Blog</div>
<br/>
[站外圖片上傳中……(4)]
<style type="text/css">
.title{padding: 10px 20px;padding: 10px 20px;width: 10%;text-align: center;}
.black-border{border: 2px #000 solid;}
.font-bold{font-family: "PT Mono", Consolas, Monaco, Menlo, monospace;font-weight: bold;}
</style>
我對上面的那段代碼修改了下，title類專門控制位置信息锭亏，black-border類控制邊框樣式过蹂，font-bold類控制字體信息十绑。
但我寫完后發(fā)現(xiàn)，按照這種方法分類確實(shí)可以酷勺，但還是得考慮css重復(fù)性的問題本橙，比如我一個地方的文字需要加粗，但不需要這個字體脆诉，所以就不能使用font-bold類甚亭。
總結(jié)，還是得在動手前想清楚頁面中击胜，重復(fù)的內(nèi)容是哪些亏狰，將重復(fù)的部分提取出來，單獨(dú)寫成一個類偶摔，盡管這個類可能只是控制一個文字的字體大小暇唾。
參考文章總結(jié)的方法
1、寫代碼之前：從PSD文件出發(fā)
當(dāng)我們拿到設(shè)計師給的PSD時辰斋，首先不要急于寫CSS代碼策州，首先對整個頁面進(jìn)行分析，主要關(guān)注點(diǎn)是下面幾個：
（1）頁面分成了幾個模塊宫仗，哪些模塊是公用的够挂，常見的比如頭部和底部，還有一些菜單欄等等
（2）分析每一個模塊都有什么樣式藕夫，提取出公用的樣式孽糖，注意公用樣式是全局公用（整個頁面公用）還是局部公用（模塊內(nèi)公用），公用樣式包括公用的狀態(tài)樣式毅贮，比如公用的選中狀態(tài)梭姓，禁用狀態(tài)等等。
2嫩码、開始寫代碼
根據(jù)對PSD文件的分析，我們就可以開始著手寫代碼罪既，我比較推薦SMACSS將樣式分成不同類型的做法：
（1）第一步是搭好頁面的骨架铸题，也就是base樣式铡恕，layout樣式。
（2）第二步就是依次實(shí)現(xiàn)不同的模塊丢间，在這里我推薦BEM的命名思想探熔，但是可以嵌套一到兩層的選擇器結(jié)構(gòu)
3、優(yōu)化代碼
我相信當(dāng)我們完成基本的頁面效果后烘挫，還是會存在著一些重復(fù)的或者不夠簡潔的代碼诀艰，這時候就是要去優(yōu)化這些代碼，主要是在提取重復(fù)代碼饮六，盡可能地精簡代碼其垄。
部分內(nèi)容參考：CSS代碼重構(gòu)與優(yōu)化之路
