CSS命名規範
一．檔案命名規範
| 代碼如下 | 複製代碼 |
全域樣式：global.css； |
|
二．常用類/ID命名規範
| 代碼如下 | 複製代碼 |
頁 眉：header |
|
常用類的命名應盡量以常見英文單詞為準，做到通俗易懂，並在適當的地方加以注釋。對於二級類/ID命名，則採用組合書寫的模式，後一個單詞的首字母應大寫：諸如“搜尋方塊”則應命名為“searchInput”、“搜尋表徵圖”命名這“searchIcon”、“搜尋按鈕”命名為“searchBtn”……
CSS書寫規範及方法
一. 常規書寫規範及方法
1. 選擇DOCTYPE：
XHTML 1.0 提供了三種DTD聲明可供選擇：
過渡的(Transitional):要求非常寬鬆的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下：
| 代碼如下 | 複製代碼 |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“> |
|
嚴格的(Strict):要求嚴格的DTD，你不能使用任何錶現層的標識和屬性，例如<br>。完整代碼如下：
| 代碼如下 | 複製代碼 |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“> |
|
架構的(Frameset):專門針對架構頁面設計使用的DTD，如果你的頁面中包含有架構，需要採用這種DTD。完整代碼如下：
| 代碼如下 | 複製代碼 |
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“> |
|
理想情況當然是嚴格的DTD，但對於我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站，使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校正。
2. 指定語言及字元集：
為文檔指定語言：
| 代碼如下 | 複製代碼 |
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”> |
|
為了被瀏覽器正確解釋和通過W3C代碼校正，所有的XHTML文檔都必須聲明它們所使用的編碼語言；如：
常用的語言定義：
| 代碼如下 | 複製代碼 |
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> |
|
3. 調用樣式表：
外部樣式表調用：
頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。 如：
| 代碼如下 | 複製代碼 |
<style type=”text/css”><!– body { background : white ; color : black ; } –> </style> <link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” /> |
|
在符合web標準的設計中，推薦使用外部調用法，可以不修改頁面只修改.css檔案而改變頁面的樣式。如果所有頁面都調用同一個樣式表檔案，那麼改一個樣式表檔案，可以改變所有檔案的樣式。
4、選用恰當的元素：
根據文檔的結構來選擇HTML元素，而不是根據HTML元素的樣式來選擇。例如，使用P元素來包含文欄位落，而不是為了換行。如果在建立文檔時找不到適當的元素，則可以考慮使用通用的div 或者是span；
避免過渡使用div和span。少量、適當的使用div和span元素可以使文檔的結構更加清晰合理並且便於使用樣式；
儘可能少地使用標籤和結構嵌套，這樣不但可以使文檔結構清晰，同時也可以保持檔案的小巧，在提高使用者下載速度的同時，也易於瀏覽器對文檔的解釋及呈視；
5、派生選取器：
可以使用派生選取器給一個元素裡的子項目定義樣式，在簡化命名的同時也使結構更加的清晰化，如：
| 代碼如下 | 複製代碼 |
.mainMenu ul li {background:url(images/bg.gif;)} |
|
6、輔助圖片用背影圖處理：
這裡的”輔助圖片”是指那些不是作為頁面要表達的內容的一部分，而僅僅用於修飾、間隔、提醒的圖片。將其做背影圖處理，可以在不改動頁面的情況下通過CSS樣式來進行改動，如：
| 代碼如下 | 複製代碼 |
#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;} |
|
7、結構與樣式分離：
在頁面裡唯寫入文檔的結構，而將樣式寫於css檔案中，通過外部調用CSS樣式表來實現結構與樣式的分離。
8、文檔的結構化書寫：
頁面CSS文檔都應採用結構化的書寫方式，邏輯清晰易於閱讀。如：
| 代碼如下 | 複製代碼 |
<div id=”mainMenu”> /*=====主導航=====*/ |
|
9、滑鼠手勢：
在XHTML標準中，hand只被IE識別，當需要將滑鼠手勢轉換為“手形”時，則將“hand”換為“pointer”，即“cursor:pointer;”
三．樣式屬性代碼縮寫
1、不同類有相同屬性及屬性值的縮寫：
對於兩個不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時，應對其加以合并縮寫，特別是當有多個不同的類而有相同的屬性及屬性值時，合并縮寫可以減少代碼量並易於控制。如：
| 代碼如下 | 複製代碼 |
#mainMenu { |
|
兩個不同類的屬性值有重複之處，剛可以縮寫為：
| 代碼如下 | 複製代碼 |
#mainMenu,#subMenu { |
|
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
