一、關於選擇器的命名 W3C CSS2.1的 4.1.3 節中提到:標識符(包括選擇器中的元素名,類和ID)只能包含字元[a- zA-Z0-9]和ISO 10646字元編碼U+00A1及以上,再加連字型大小(-)和下劃線(_);它們不能以 數字,或一個連字型大小後跟數字為開頭。它們還可以包含轉義字元加任何I ...
一、關於選擇器的命名 W3C CSS2.1的 4.1.3 節中提到:標識符(包括選擇器中的元素名,類和ID)只能包含字元[a- zA-Z0-9]和ISO 10646字元編碼U+00A1及以上,再加連字型大小(-)和下劃線(_);它們不能以 數字,或一個連字型大小後跟數字為開頭。它們還可以包含轉義字元加任何ISO 10646字元作為一個數 字編碼。 註:由於設計到的字元很多,本文只針對字元[a-zA-Z0-9],再加連字型大小(-)和下劃線(_)進行討論。 關於CSS中允許使用的字元和大小寫信息,請參考W3C CSS2.1的4.1.3節 二、差異及可能產生的問題 在W3C CSS2.1說明文檔中,只提到選擇器標識符不能以數字,或一個連字型大小後跟數字為開頭。除此之外,沒有相關的說明。那麼各瀏覽器下的表現是否遵循這一規則呢? 三、如何避免受此問題影響 堅持以字母開頭命名選擇器,這樣可保證在所有瀏覽器下都能相容。 四、關於團隊合作的css命名規範 常用的css命名規則 頭:header 內容:content/container 尾:footer 導航:nav 側欄:sidebar 欄目:column 頁面外圍控制整體佈局寬度:wrapper 左右中:left right center 登錄條:loginbar 標誌:logo 廣告:banner 頁面主體:main 熱點:hot 新聞:news 下載:download 子導航:subnav 菜單:menu 子菜單:submenu 搜索:search 友情鏈接:friendlink 頁腳:footer 版權:copyright 滾動:scroll 內容:content 標簽頁:tab 文章列表:list 提示信息:msg 小技巧:tips 欄目標題:title 加入:joinus 指南:guild 服務:service 註冊:regsiter 狀態:status 投票:vote 合作伙伴:partner (二)註釋的寫法: /* Footer */ 內容區 /* End Footer */ (三)id的命名: (1)頁面結構 容器: container 頁頭:header 內容:content/container 頁面主體:main 頁尾:footer 導航:nav 側欄:sidebar 欄目:column 頁面外圍控制整體佈局寬度:wrapper 左右中:left right center (2)導航 導航:nav 主導航:mainbav 子導航:subnav 頂導航:topnav 邊導航:sidebar 左導航:leftsidebar 右導航:rightsidebar 菜單:menu 子菜單:submenu 標題: title 摘要: summary (3)功能 標誌:logo 廣告:banner 登陸:login 登錄條:loginbar 註冊:regsiter 搜索:search 功能區:shop 標題:title 加入:joinus 狀態:status 按鈕:btn 滾動:scroll 標簽頁:tab 文章列表:list 提示信息:msg 當前的: current 小技巧:tips 圖標: icon 註釋:note 指南:guild 服務:service 熱點:hot 新聞:news 下載:download 投票:vote 合作伙伴:partner 友情鏈接:link 版權:copyright (四)class的命名: (1)顏色:使用顏色的名稱或者16進位代碼,如 .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } (2)字體大小,直接使用”font+字體大小”作為名稱,如 .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)對齊樣式,使用對齊目標的英文名稱,如 .left { float:left; } .bottom { float:bottom; } (4)標題欄樣式,使用”類別+功能”的方式命名,如 .barnews { } .barproduct { } 註意事項:: 1.一律小寫; 2.儘量用英文; 3.不加中杠和下劃線; 4.儘量不縮寫,除非一看就明白的單詞. 主要的 master.css 模塊 module.css 基本共用 base.css 佈局,版面 layout.css 主題 themes.css 專欄 columns.css 文字 font.css 表單 forms.css 補丁 mend.css 列印 print.css