CSS是前端開發(fā)中常用的樣式表語言，它可以控制HTML文檔的樣式和布局。要編寫高效、可維護(hù)的CSS代碼，需要遵循以下規(guī)則：

/* 1. 選擇器的優(yōu)化 */
/* 不使用通配符選擇器和標(biāo)簽選擇器，盡可能使用類選擇器，ID選擇器或?qū)傩赃x擇器*/
/* 不要使用如下選擇器 */
* {
margin: 0;
padding: 0;
}
h3 {
font-size: 18px;
}
/* 應(yīng)該改為如下選擇器 */
.className {
margin: 0;
padding: 0;
}
#idName {
font-size: 18px;
}
/* 2. 樣式表的順序 */
/* 按照以下順序進(jìn)行排列 */
/* 布局相關(guān) */
display
position
float
clear
/* 盒模型 */
width
height
margin
padding
border
/* 樣式相關(guān) */
background
color
font
/* 偽類和偽元素 */
:hover
:before
:after
/* 3. 使用簡(jiǎn)明的屬性 */
/* 將相關(guān)的屬性組合在一起，如border和margin */
/* 不要這樣寫 */
.box {
border-width: 1px;
border-style: solid;
border-color: #000000;
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
/* 應(yīng)該這樣寫 */
.box {
border: 1px solid #000000;
margin: 10px 20px 30px 40px;
}
/* 4. 樣式表的復(fù)用 */
/* 遵循DRY（DON'T REPEAT YOURSELF）原則，將重復(fù)的樣式代碼集中到一起 */
/* 不要這樣寫 */
.box1 {
background-color: #ffffff;
width: 150px;
height: 150px;
}
.box2 {
background-color: #ffffff;
width: 200px;
height: 200px;
}
/* 應(yīng)該這樣寫 */
.box {
background-color: #ffffff;
}
.box1 {
width: 150px;
height: 150px;
}
.box2 {
width: 200px;
height: 200px;
}