在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，CSS是最為重要的一環(huán)，它可以控制頁(yè)面的布局、樣式、字體、顏色、動(dòng)畫(huà)等元素，通過(guò)良好的CSS編碼可以使頁(yè)面更加易于維護(hù)、易于擴(kuò)展、易于優(yōu)化，提高用戶體驗(yàn)。下面是一份CSS編碼大全，幫助開(kāi)發(fā)人員規(guī)范CSS編碼。

/* 命名規(guī)范 */
.container {} /* 選擇器使用小寫(xiě)字母和-連接 */
.introText {} /* 多個(gè)單詞連接時(shí)用駝峰法 */
#nav {} /* id選擇器用于唯一標(biāo)識(shí) */
.btn {} /* 類選擇器用于共享樣式 */
/* 格式規(guī)范 */
.container {
padding: 10px;
margin: 0;
border: 1px solid #ccc;
} /* 使用4個(gè)空格縮進(jìn)，避免使用Tab鍵 */
/* 聲明順序 */
.container {
/* Layout */
display: block;
position: relative;
float: left;
/* Box */
width: 100px;
height: 100px;
margin: 10px;
padding: 5px;
/* Typography */
font-size: 16px;
line-height: 1.5;
color: #333333;
/* Visual */
background-color: #ffffff;
border: 1px solid #cccccc;
} /* 按功能分組聲明 */
/* 選擇器命名優(yōu)化 */
/* 使用語(yǔ)義化的選擇器 */
/* 其他 */
.btn:active, .btn:focus, .btn:hover {
/* all states */;
} /* 一致性 */
/* 繼承與重寫(xiě) */
.container {
font-size: 16px;
} /* 可以被繼承的屬性應(yīng)該在父元素中被設(shè)置 */
.introText {
font-size: 0.8em;
} /* 對(duì)于需要重寫(xiě)的樣式，應(yīng)該在子元素中重新聲明 */