常用的CSS命名規則

作為一名資深的建站愛好者，對DIV+CSS技術，筆者是十分癡迷的，如果發現哪一個頁面做的十分漂亮，會第一時間查看原代碼，看一下它是怎么設計的，當然時間久了，你就會發現一些有關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

是不是很有意思呢，當然了，以后再寫CSS時能夠注意到這些的話，不僅會顯著你的頁面正規，還會增加搜索引擎的好感的哦。