全面總結(jié)CSS代碼的編寫規(guī)范及優(yōu)化建議

2024-07-11 08:33:19

字體：大中小

供稿：網(wǎng)友

結(jié)構(gòu)、樣式、行為分離
盡量確保文檔和模板只包含 HTML 結(jié)構(gòu)，樣式都放到樣式表里，行為都放到腳本里。

縮進(jìn)
統(tǒng)一兩個空格縮進(jìn)（總之縮進(jìn)統(tǒng)一即可），不要使用 Tab 或者 Tab、空格混搭。

文件編碼
使用不帶 BOM 的 UTF-8 編碼。

在 HTML 中指定編碼<meta charset="utf-8">；
無需使用@charset 指定樣式表的編碼，它默認(rèn)為 UTF-8；
一律使用小寫字母

CSS Code復(fù)制內(nèi)容到剪貼板

省略外鏈資源 URL 協(xié)議部分
省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協(xié)議，使 URL 成為相對地址，避免 Mixed Content 問題，減小文件字節(jié)數(shù)。

其它協(xié)議（ftp 等）的 URL 不省略。

CSS Code復(fù)制內(nèi)容到剪貼板

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script> /* Recommended */
.example { background: url(//www.google.com/images/example);
}
/* Not recommended */ .example {
background: url(http://www.google.com/images/example); }

CSS 注釋

組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；

CSS Code復(fù)制內(nèi)容到剪貼板

/* ========================================================================== 組件塊
============================================================================ */
/* 子組件塊 ============================================================================ */