css命名規范
頁面結構命名
- page：代表整個頁面，用於最外層。
- wrap：外套，將所有元素包在一起的一個外圍包，用於最外層
- wrapper：頁面外圍控制整體布局寬度，用於最外層
- container：一個整體容器，用於最外層
- head、header：頁頭區域，用於頭部
- nav：導航條
- content：內容，網站中最重要的內容區域，用於網頁中部主體
- main：網站中的主要區域（表示最重要的一塊位置），用於中部主體內容
- column：欄目
- sidebar：側欄
- foot、footer：頁尾、頁腳。網站一些附加信息放置區域，（或命名為copyright）用於底部
導航命名
- nav、navbar、navigation、nav-wrapper：導航條或導航包，代表橫向導航
- topnav：頂部導航
- mainbav：主導航
- subnav：子導航
- sidebar：邊導航
- leftsidebar 或 sidebar_a ：左導航
- rightsidebar 或 sidebar_b：右導航
- title：標題
- summary：摘要/li>
- menu：菜單。區域包含一般的鏈接和菜單
- submenu：子菜單
- drop：下拉
- dorpmenu：下拉菜單
- links：鏈接菜單
功能命名
- logo：標記網站logo標志
- banner：標語、廣告條、頂部廣告條
- login：登陸，（例如登錄表單：form-login）
- loginbar：登錄條
- regsiter：注冊
- tool、toolbar：工具條
- search：搜索
- searchbar：搜索條
- searchlnput：搜索輸入框
- shop：功能區，表示現在的
- icon：小圖標
- label：商標
- homepage：首頁
- subpage：二級頁面子頁面
- hot：熱門熱點
- list：文章列表，（例如新聞列表：list-news）
- scroll:滾動
- tab：標簽
- sitemap：網站地圖
- msg 或 message：提示信息
- current：當前的
- joinus：加入
- status：狀態
- btn：按鈕，（例如搜索按鈕可寫成：btn-search）
- tips：小技巧
- note：注釋
- guild：指南
- arr、arrow：標記箭頭
- service：服務
- breadcrumb：(即頁面所處位置導航提示）
- download：下載
- vote：投票
- siteinfo：網站信息
- partner：合作伙伴
- link、friendlink：友情鏈接
- copyright：版權信息
- siteinfoCredits：信譽
- siteinfoLegal：法律信息
CSS樣式命名
- 對齊樣式命名：left（左邊內容）、center（中間內容）、right（右邊內容）等；
- 顏色英文命名：red（紅色）、green（綠色）、yellow（黃色），又或者border_red（紅色邊框）等；
- 顏色代碼命名：f00（紅色）、ff0（黃色）、f90（橙色）等；
- 文字大小命名：font12px（字體12像素）、font16px（字體16像素）等；
- 頁面線條命名：line_x （橫線）、line_y （縱線）或 line_red（紅線）、line_black（黑線）
- 圖片圖標命名：pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
- 頁面廣告命名：ad_01、ad_02
- 背景框架命名：nav_bg（代表導航條的背景圖片位置）、tool_bg（代表工具欄的背景圖片位置）
CSS樣式表命名
- index.css：單獨為首頁建立樣式
- head.css：頭部樣式，多個頁面頭部設計風格相同時使用。
- base.css：共用樣式。
- style.css：獨立頁面所使用的樣式文件。
- global.css：頁面樣式基礎，全局公用樣式，頁面中必須包含。
- layout.css：布局、版面樣式，公用類型較多時使用，一般用在首頁級頁面和產品類頁面中
- module.css：模塊，用於產品類頁，也可與其它樣式配合使用。
- master.css：主要的樣式表
- columns.css：專欄樣式
- themes.css：主體樣式
- forms.css：表單樣式
- mend.css：補丁，基於以上樣式進行的私有化修補。