css命名規範

頁面結構命名

1、page：代表整個頁面，用於最外層

2、wrap:外套，將所有元素包在一起的一個外圍包，用於最外層

3、wrapper：頁面外圍控制整體布局寬度，用於最外層

4、container：一個整體容器，用於最外層

5、head、header：頁頭區域，用於頭部

6、nav：導航條

7、content：內容，網站中最重要的內容區域，用於網頁中部主體

8、main：網站中的主要區域（表示最重要的一塊位置），用於中部主體內容

9、column：欄目

10、sidebar：側欄

11、foot、footer：頁尾、頁腳。網站一些附加信息放置區域，（或命名為copyright）用於底部

導航命名

1、nav、navbar、navigation、nav-wrapper：導航條或導航包，代表橫向導航

2、topnav：頂部導航

3、mainbav：主導航

4、subnav：子導航

5、sidebar：邊導航

6、leftsidebar或sidebar_a:左導航

7、rightsidebar或sidebar_b:右導航

8、title：標題

9、summary：摘要

10、menu：菜單，區域包含一般的鏈接和菜單

11.submenu:子菜單

12、drop：下拉

13.dropmenu：下拉菜單

14.links：鏈接菜單

功能命名

1.logo：標記網站logo標誌

2、banner：標語、廣告條、頂部廣告條

3、login：登錄

4、loginbar：登錄條

5、regsiter：註冊

6、tool、toolbar：工具條

7、search:搜索

8、searchbar：搜索條

9、searchInput：搜索輸入框

10、shop：功能區，表示現在的

11、icon：小圖標

12、label：商標

13、homepage：首頁

14、subpage：二級頁面子頁面

15、hot：熱門熱點

16、list：文章列表

17、scroll：滾動

18、tab：標簽

19、sitemap：網站地圖

20、msg或message：提示信息

21、current：當前的

22、joinus：加入

23、status：狀態

24、btn：按鈕

25、tips：小技巧

26、note：註釋

27、guild：指南

28、arr、arrow：標記箭頭

29、service：服務

30、breadcrumb：（即頁面所處位置導航提示）

31、download：下載

32、vote：投票

33、siteinfo：網站信息

34、partner：合作夥伴

35、link、friendlink：友情鏈接

36、copyright：版權信息

37.siteinfoCredits：信譽

38、siteinfoLegal：法律信息

CSS樣式命名

1、對齊樣式命名：left（左邊內容）、center（中間內容）、right（右邊內容）等

2、顏色英文命名：red（紅色）、green（綠色）、yellow（黃色），又或者border_red（紅色邊框）等

3、顏色代碼命名：f00（紅色）、ff0（黃色）、f90（橙色）等

4、文字大小命名：font12px（字體12像素）、font16px（字體16像素）等

5、頁面線條命名：line_X(橫線）、line_y（縱線）或line_red(紅線）、line_black(黑線）

6、圖片圖標命名：pic_1.jpg、pic_2.jpg或ico_1.gif、ico_2.gif

7、頁面廣告命名：ad_01、ad_02

8、背景框架命名：nav_bg(代表導航條的背景圖片位置）、tool_bg(代表工具欄的背景圖片位置）

CSS樣式表命名

1、index.css:單獨為首頁建立樣式

2、head.css:頭部樣式，多個頁面頭部設計風格相同時使用

3、base.css:共用樣式

4、style.css:獨立頁面所使用的樣式文件

5、global.css:頁面樣式基礎，全局公用樣式，頁面中必須包含。

6、layout.css:布局、版面樣式，公用類型較多時使用，一般用在首頁級頁面和產品類頁面中

7、module.css:模塊，用於產品類頁，也可與其它樣式配合使用

8、master.css:主要的樣式表

9、columns.css:專欄樣式

10、themes.css:主體樣式

11、forms.css:表單樣式

12、mend.css:補丁，基於以上樣式進行的私有化修補

css命名規範