在任何一個項目或者系統開發之前都需要定製一個開發約定和規則，這樣有利於項目的整體風格統一、代碼維護和擴充。由於Web項目開發的分散性、獨立性、整合的互動性等，所以定製一套完整的約定和規則顯得尤為重要。基於目前廣東人才網新改版方案已全面啟動，為了更好的使新改版項目能夠順利有效進行，特製定以下CSS命名規範文檔作。
一. 檔案夾命名規範
檔案夾命名採用英文，長度一般不超過20個字元，命名採用小寫字母。除特殊情況才使用中文拼音，檔案夾命名如：
Images(存放圖形檔案)
flash（存放Flash檔案）
style/css(存放CSS檔案)
scripts（存放Javascript指令碼）
link（存放友情連結）
media(存放多媒體檔案)等。
檔案夾結構說明：黑色-代表根目錄 紅色－代表根目的下一級 藍色－代表該目錄的一下級
web root檔案夾-網站根目錄
company檔案夾－存放企業管理頁面
css檔案夾－存放樣式的根目錄
base.css－整站頁面的公用樣式
company檔案夾－存放企業管理頁面的樣式
search檔案夾－存放搜尋結果頁面的樣式
user檔案夾－存放個人簡曆管理頁面的樣式
images檔案夾－存放圖片的根目錄
company檔案夾－存放企業管理頁面的圖片
user檔案夾－意義同上
flash檔案夾－存放flash動畫的目錄
js檔案夾－存放js的根目錄
company檔案夾－存放企業管理頁面的js
user檔案夾－意義同上
dpax檔案夾－存放處理ajax請求的jsp
inc檔案夾－存放包含通用檔案
search檔案夾－存放搜尋結果頁面
user檔案夾－存放個人簡曆管理頁面
tm plate檔案夾－存放模板
二.檔案名稱命名規範
檔案名稱統一用小寫英文字母、數字和底線的組合。命名原則的指導思想
一是使得你自己和工作群組的每一個成員能夠方便的理解每一個檔案的意義，
二是當我們在檔案夾中使用“按名稱排例”的命令時，同一種大類的檔案能夠排列在一起，以便我們尋找、修改、替換、計算負載量等等操作 。
（一）圖片的命名與書寫規範
圖片的命名原則名稱分為頭尾兩部分，用底線隔開，頭部分表示此圖片的大類性質例如廣告、標誌、菜單、按鈕等等。
放置在頁面頂部的廣告、裝飾圖案等長方形的圖片取名： banner
標誌性的圖片取名為： logo
在頁面上位置不固定並且帶有連結的小圖片我們取名為 button
在頁面上某一個位置連續出現，性質相同的連結列目的圖片我們取名： menu
裝飾用的照片我們取名： pic
不帶連結資料表示標題的圖片我們取名： title
下面是幾個範例： banner_sohu.gif 、banner_sina.gif、 menu_aboutus.gif 、menu_job.gif、 title_news.gif、 logo_police.gif、 logo_national.gif 、pic_people.jpg 。
（二） css的命名與書寫規範
1、所有的css的盡量採用外部調用
<link href= "style/style.css " rel= "stylesheet " type= "text/css ">
書寫時重定義的最先，偽類其次，自訂最後（其中a:link a:visited a:hover a:actived 要按照順序寫）便於自己和他人閱讀。
為了保證不同瀏覽器上字型大小保持一致，字型大小建議用點數pt和像素px來定義，pt一般使用中文宋體的9pt和11pt，px一般使用中文宋體12pt 和14.7px 這是經過最佳化的字型大小，黑體字或者宋體字加粗時，一般選用11pt和14.7px 的字型大小比較合適。
2、css推薦模板:
<style type= "text/css ">
<!—
body{ font-size:9pt;font-family:arial, helvetica, sans-serif; color:#333333; text-align:center; margin:0px;}
ul { margin:auto; }
img { border:0px; }
a { font-size:9pt; text-decoration:none;color:#ffffff; }
a:hover {font-size:9pt; text-decoration:underline; color:#990000; }
a.1 {font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover {font-size: 9pt; color: #ff9900; text-decoration: none}
.colorblue,colorblue:hover {color:#003366 ;}
.blue{font-family: "宋體 "; font-size: 9pt; line-height: 20px; color: #0099ff; letter-spacing: 5em}
.colorred,a.colorred:hover{color: #ff0000; }
.colorlime,a.colorlime:hover{color: #00ff00; }
.colorgreen,a.colorgreen:hover{ color: #008000; }
.colorblue,a.colorblue:hover{color: #0000ff; }
.colororange,a.colororange:hover{color: #ffa500; }
-->
</style>
為了保證瀏覽器的相容性，必須設定頁面背景 <body bgcolor= "#ffffff ">
3、注釋書寫規範
a、行間注釋：
直接寫於屬性值後面，如：
.search{border:1px solid #fff;/*定義搜尋輸入框邊框*/
background:url(../images/icon.gif) no-report #333;/*定義搜尋方塊的背景*/}
b、整段注釋：
分別在開始及結束地方加入注釋，如：
/*=====搜尋條=====*/
.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}
/*=====搜尋條結束=====*/
c．協助注釋
非作者維護時所加入的表示修改時間、修改人等標識資訊。
在地區注釋或單行注釋的基礎上加上修改人和修改時間等資訊。
例(地區注釋)：
<!--==S 注釋內容[修改人和修改時間]-->
<div>...</div>
<!--==E 注釋內容[修改人和修改時間]-->
/*=S 注釋內容[修改人和修改時間]*/
.class{...}
.class{...}
/*=E 注釋內容[修改人和修改時間]*/
例(單行注釋)：
<div>
<!-- 注釋內容[修改人和修改時間]-->
...
</div>
.class{
/*注釋內容[修改人和修改時間]*/
...
}
（二）css命名參考
1、常用的css命名規則：
頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar
欄目：column
……….
2、直觀命名
當在設計web頁面以及需要對一個div進行標識的時候，最自然的想法就是使用可以描述元素所在頁面位置的詞彙來對其命名。這種方法使得類以及id的名稱如下面所示：
自上而下小組：top-panel
橫向：horizontal-nav
左面：left-side
中心-欄目：center-column
右面：right-col
這些是css以及xhtml類和id的有效命名方式。這些詞彙簡單並且能夠使人顧名思義，因此滿足了標識頁面元素以及相應的css樣式的需要。
但問題是這樣的名稱同頁面內容的特定表達方式相關聯。這些命名參考了某種特定頁面配置中的頁面元素位置，因此在這樣的布局之外使用就會顯得不合適甚至造成理解混亂。同時，這些命名沒有涉及文檔內容的結構。因此，下面給出了對css類以及id命名更好的方法。
3、結構化命名
結構化的標記意味著表達方式/位置資訊同內容的完全分離——這其中包括出現在標記（markup）中的類和id名稱。
有標記的相關資訊都是用來描述文檔的結構而不是外觀。這樣的特點使得我們可以通過簡單的改變css的方式來對不同外觀格式下的內容（content）以及標記（markup）進行重用。當你理解這種方式時，很容易就可以發現採用頁面位置來為類以及id命名的方式在處理如音頻（audio）等外觀格式上顯得非常不合適。因此，應當根據在文檔中的使用目的而非出現位置來對類以及id進行結構化命名。
可以按照如下所示的結構化方式來對類以及id名稱命名：
頂部搶眼部分：branding
導航部分：main-nav
主要內容部分：main-content
這些名字同直觀命名方式一樣非常易懂，但他們描述了頁面元素的作用而非位置。這使得代碼更加符合使用純粹的結構化標記（structural markup）的初衷，即開發人員可以在不改變標記的情況下對各種各樣媒體下的顯示格式進行處理。
即使你不打算在其他的媒體上對web頁面進行格式修改，使用結構化命名方式還可以協助你在日後的網站升級或重新設計中更為輕鬆。例如，結構化命名避免了當一個div同id right-column移動到頁面左邊後所帶來的混亂。對div sidebar的採用這樣的命名方式就顯得更加適當，因為無論它出現在頁面的哪一邊，這個名字仍然對本項目人員來說直觀易懂。
4、自訂命名：
根據w3c網站上給出的,最好是用意義命名
比如：是重要的新聞高亮顯示（像紅色）
有兩種
.red{color:red}
.important-news{color:red}
很顯然第二種傳達的意義更加明確,所以盡量不要用意義不明確的作為自己自訂的名字
三、css樣式書寫順序
1、顯示內容
* display * list-style * position * float * clear
2、自身屬性
* width * height * margin * padding * border * background
3、文字屬性
* color * font * text-decoration * text-align
* vertical-align * white-space * other text * content
以上CSS命名規範其儘可能的按3c（css 2.1 XHTML1.0 Transitional）標準來執行操作，在一定的程度上加強了團隊的協作水平，提升了項目的開發效率和品質，同時也助於大家良好書寫規範代碼的習慣。
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
