在網頁開發中，CSS優化是非常重要的一環，可以有效提升頁面性能和用戶體驗。下面是一些CSS優化規范：

/* 利用縮寫語法 */
/* 不好的寫法 */
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 1.5em;
/* 好的寫法 */
font: bold 14px/1.5 Arial, sans-serif;
/* 選擇器縮寫 */
/* 不好的寫法 */
ul li a {}
ul li span {}
ul li em {}
/* 好的寫法 */
ul li {
a {}
span {}
em {}
}
/* 避免使用ID選擇器 */
/* 不好的寫法 */
#header {}
#sidebar {}
#footer {}
/* 好的寫法 */
.header {}
.sidebar {}
.footer {}
/* 使用CSS樣式短語 */
/* 不好的寫法 */
.header h1 {}
.header .description {}
.sidebar ul li {}
/* 好的寫法 */
.header {
h1 {}
.description {}
}
.sidebar {
ul {
li {}
}
}
/* 避免使用通配符選擇器 */
/* 不好的寫法 */
* {}
/* 好的寫法 */
html {}
body {}
header {}
nav {}
article {}
section {}
aside {}
footer {}
/* 避免使用!important */
/* 不好的寫法 */
.header {
color: red!important;
}
.sidebar {
color: blue!important;
}
/* 好的寫法 */
.header.title {
color: red;
}
.sidebar.title {
color: blue;
}
/* 避免使用行內樣式 */
/* 不好的寫法 */
Hello world!
/* 好的寫法 */
Hello world!
/* 避免重復CSS代碼 */
/* 不好的寫法 */
.header {
font-size: 16px;
color: #333;
background-color: #fff;
}
.footer {
font-size: 16px;
color: #333;
background-color: #fff;
}
/* 好的寫法 */
.header, .footer {
font-size: 16px;
color: #333;
background-color: #fff;
}