網頁前端關於如何命名css樣式

網頁製做中規範使用DIV+CSS命名規則，能夠改善優化功效特別是團隊合做時候能夠提供合做製做效率，具體DIV CSS命名規則CSS命名大全內容以下：

頁頭：header  如：#header{屬性:屬性值;}或.header{屬性:屬性值;},也許你須要瞭解class與id區別及用法
登陸條：loginBar         標誌：logo                側欄：sideBar
廣告：banner              導航：nav                 子導航：subNav
菜單：menu               子菜單：subMenu      搜索：search
滾動：scroll               頁面主體：main         內容：content
標籤頁：tab                 文章列表：list            提示信息：msg
小技巧：tips                欄目標題：title            加入：joinus
指南：guild                服務：service              熱點：hot
新聞：news                 下載：download         註冊：regsiter
狀態：status                按鈕：btn                    投票：vote
合做夥伴：partner       友情連接：friendLink   頁腳：footer
版權：copyRight
經常使用配合標籤div、h一、h二、h三、h四、span、em、b、strong、font、u

1.CSS的 ID 的命名 也許你須要瞭解class與Id區別

外　套：wrap              主導航：mainNav        子導航：subnav
頁　腳：footer             整個頁面：content      頁　眉：header
版    權：copyRight      商　標：label              標　題：title
主導航：mainNav(globalNav)                  頂導航：topnav
邊導航：sidebar           左導航：leftsideBar   右導航：rightsideBar
旗　志：logo                標　語：banner         菜單內容1： menu1Content
菜單容量：　menuContainer                  子菜單：　　submenu
邊導航圖標：sidebarIcon                        註釋：　　　note
麪包屑：breadCrumb(即頁面所處位置導航提示)
容器：container      內容：content          搜索：search
登錄：login             功能區：　　shop(如購物車，收銀臺)
當前：current
DIV+CSS命名小結：不管是使用「.」（小寫句號）選擇符號開頭命名，仍是使用「#」(井號)選擇符號開頭命名都無所謂，但咱們最好遵循，主要的、重要的、特殊的、最外層的盒子用「#」(井號)選擇符號開頭命名，其它都用「.」（小寫句號）選擇符號開頭命名，同時考慮命名的CSS選擇器在HTML中重複使用調用。

一般咱們最經常使用主要命名有：wrap（外套、最外層）、header（頁眉、頭部）、nav(導航條)、menu(菜單)、title(欄目標題、通常配合h1h2h3h4標籤使用)
、content (內容區)、footer(頁腳、底部)、logo（標誌、能夠配合h1標籤使用）、banner（廣告條，通常在頂部）、copyRight（版權）。其它可根據本身須要選擇性使用。

DIVCSS5建議：主要的、重要的、最外層的盒子用「#」(井號)選擇符號開頭命名，其它都用「.」（小寫句號）選擇符號開頭命名。
2.CSS樣式文件命名以下

主要的 master.css
佈局，版面 layout.css
專欄 columns.css
文字 font.css
打印樣式 print.css
主題 themes.css

也許你須要瞭解一下css引用到html方法

以上爲DIV+CSS的命名規則總結，相信經過規範的CSS命名給你之後網站網頁的維護帶來方便。

文章轉載自： zhoumeng 2012年11月21日 於 前端開拓者 發表，感謝做者分享。