web設計之CSS命名規範詳解

web設計之CSS命名規範：

1.1 公共部分和常常要用到的樣式

整個容器：container

外圍總體佈局： wrap

頁頭部分：head/header/top

內容：content

頁腳部分：foot/footer/bottom

欄目：column 主體部分：main

左 / 中 / 右 三 欄 ： main_left/main_mid/main_right main_l/main_m/main_r

側欄：sidebar

左右兩欄：siderbar_l/sidebar_r 或者 leftsidebar/rightsidebar

左中右：left/center/right

側導航：sidenav

左/右導航：leftsidenav/rightsidenav

子導航：subnav

菜單：menu

子菜單：submenu

標題：title

摘要：summary

下拉：drop

下拉菜單：dropmenu

搜索：search

熱門搜索：hotsearch

關鍵字：keyword

搜索輸入框：search_input

搜索條：searchbar

友情連接：friendlink/link

版權信息：copyright

投票：vote

合做夥伴：partner

服務：service

指南：guid

網站信息：siteinfo

網站地圖：sitemap

網站幫助：sitehelp

法律聲明：siteinfolegal

信譽：siteinfocredits

加入咱們：joinus

關於咱們：aboutus

聯繫咱們：contactus

小技巧：tips

註釋：note

當前的：current

標籤頁：Tab

文章列表：List

提示信息：Msg

滾動：scroll

工具條：toolbar/tool

時間：time

日期：data

熱點：hot

新聞：news

註冊：Regsiter

狀態：Status

按鈕：Btn

下載：download

產品：products/pro

縮略圖：screenshot 等等...

1.2 私有樣式命名規範：

爲了不出現樣式私有樣式的名稱和公有樣式重複的想象， 私有樣式 採用：」前綴_位置縮寫」 的規則。如：該模塊是屬於產品就能夠用product爲前綴 。

上中下就能夠依次是： product_h,product_m,product_b.

中間又分爲左右結構，那就是 product_m_l,product_m_r

1.3 區域塊：box/area

區域塊樣式類別+box/area,

好比新聞區域塊： newsbox/newsarea，

產品區域塊：probox/proarea

標題欄：bar (newsbar/probar)

列表：list (newslist/prolist)

2 id 與 class: class id 一個頁面只可使用一次，class 能夠屢次引用。id 和 class class id 好像沒什麼區別，在頁面中用了多個id 在IE中顯示也正常，第一影響就是不能經過 W3 的校驗。在頁面顯示上，目前的瀏覽器還都容許 你犯這個錯誤，用多個相同 ID「通常狀況下」也能正常顯示。可是當你須要用 JavaScript 經過 id 來控制這個div，那就會出現錯誤。 所以：樣式最好以 class 爲主，不用id

3 css 屬性書寫順序 建議遵循 佈局定位屬性–>自身屬性–>文本屬性–>其餘屬性. 此條可 根據自身習慣書寫, 但儘可能保證同類屬性寫在一塊兒. 屬性列舉: 佈局定 位屬性主要包括: margin＆padding＆float（包括 clear）＆position（相 應的 top,right,bottom,left）＆display＆visibility＆overflow 等； 自身屬 性主要包括: width & height & background & border; 文本屬性主要包 括： font＆color＆text-align＆text-decoration＆text-indent 等； 其餘屬性 包 括 : list-style( 列 表 樣 式 ) ＆ vertical-vlign ＆ cursor ＆ z-index( 層 疊 順 序) ＆zoom 等. 表達式（Expression）

3.1 避免使用 CSS 表達式（Expression） 表達式的問題就在於它的計算頻率要比咱們想象的多

3.2 *{} , #zishu {} 儘可能避開 因爲不一樣瀏覽器對 HTML 標籤的解釋有差別，因此最終的網頁效果在 不一樣的瀏覽器中多是不同的，爲了消除這方面的風險，設計者通 常會在 CSS 的一個始就把全部標籤的默認屬性所有去除，以達到全部 籤標屬性值都統一的效果。因此就有了通配符。*會遍歷全部的標籤；這樣寫的問題是：

1)遍歷會消耗不少的時間，若是你的 HTML 代碼寫的不規範或是某 一簽標沒有必合，這個時間可能還會更長；

2)不少的標籤原本就沒有這個屬性或屬性自己就是統一的，那麼 更給設置一次，也有時間的開消；

4 一些注意事項

1)儘可能考慮爲元素命名其自己的做用或」用意」，達到語義化。 不要使用表面形式的命名

2）一概小寫字母

3）儘可能用英文

4）css 註釋 /* fff */ 注意要加空格，否則在 jsp 讀取下會忽略 掉註釋下得第一個 css

5）css 文件最好用 utf-8

6）頁面啊居中：margin:0 auto;居右： margin:0 0 0 auto;居左： margin:0 auto 0

7）不要去使用生僻的標籤，由於這些標籤每每在不一樣瀏覽器中解釋 出來的效果不同；因此你要儘量的去使用那些經常使用的標籤；

8. 不 要 使 用 * ； 而 是 把 你 常 用 到 的 這 些 標 籤 進 行 處 理 ； 例 如 ： body,li,p,h1{margin:0; padding:0}

9. 必須爲大區塊樣式添加註釋, 小區塊適量註釋;

10. 代碼縮進與格式: 建議單行書寫