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

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