簡單HTML屬性、CSS樣式及文件的命名規則

文件夾主要創建如下文件夾：
　　一、Images 存放一些網站經常使用的圖片；
　　二、Css 存放一些CSS文件；
　　三、Flash 存放一些Flash文件；
　　四、PSD 存放一些PSD源文件；
　　五、Temp 存放全部臨時圖片和其它文件；
　　六、copyright 版權信息（可選）
　　八、readme 說明文件

一、css統一命名
　　注：本CSS命名規則只適合物table製做模式下
　　一、 css文件統一放在css文件夾下；命名css.css
　　二、 主樣式定義：body、table、td、tr、a
　　三、 連接樣式定義：link_white（白色）；link_black （黑色）；link_blue （藍色） 等等；
　　說明：若有重複的後面加阿拉伯數字；如 link_red01 有下劃線的如：linkred
　　四、 文字樣式定義：font_red （紅色）；font_red_14 （紅色14號字）；font_red_14b （紅色14號加粗）
　　五、 邊框樣式定義：border_red_tblr （紅色四個邊）；border_red_blr（紅色底左右三邊）；border_red_lr（紅色左右兩個邊）；border_red_b （紅色底一個邊）等等；
　　六、 表單樣式定義：text_100 （文本字段寬爲100）； textarea_200_red （文本區域寬爲200有紅色邊框）；select_100 （列表寬爲100）；button_150 （按鈕寬150）；
　　說明：表單用寬度定義，在命名中最長寫到：「text_100_red」
　　七、 線的樣式定義：line_X （橫線）；line_Y （豎線）；line_X_red （紅色橫線）；line_X_red2 （兩個像素的紅色橫線）；說明：在line中只定義虛線，實線在border中定義
　　八、 其它樣式定義：在這裏主要定義一些個性化的樣式；
二、文件命名
　　head.asp 頭文件
　　foot.asp 底文件
　　index.asp 首頁文件
　　sort.html 分類嵌套文件
　　article_channel.asp 文章_頻道頁
　　article_list.asp 文章_列表頁
　　article_detail.asp 文章_顯示頁
　　註明：若是有多個文章頻道，則用article01， article02，article03等等
　　exhibit_channel.asp 展會信息_頻道頁
　　exhibit_list.asp 展會信息_列表頁
　　exhibit_detail.asp 展會信息_顯示頁
　　product_channel.asp 產品中心_頻道頁
　　product_list.asp 產品中心_列表頁
　　prodect_detail.asp 產品中心_顯示頁
　　corporation_channel.asp 會員_頻道頁
　　corporation_list.asp 會員_列表頁
　　corporation_detail.asp 會員_顯示頁
　　information_channel.asp 商機信息_頻道頁
　　information_list.asp 商機信息_列表頁
　　information_detail.asp 商機信息_顯示頁
　　job_channel.asp 招聘_頻道頁
　　job_list.asp 招聘_列表頁
　　job_detail.asp 招聘_顯示頁
　　hr_channel.asp 求職_頻道頁
　　hr_list.asp 求職_列表頁
　　hr_detail.asp 求職_顯示頁
　　job_hr_channel.asp 人才中心_頻道頁
　　job_hr_lisr.asp 人才中心_列表頁
　　job_hr_detail.asp 人才中心顯示頁
　　copyright.asp 版權頁
三、圖片命名
　　一、導航命名：menu.gif 如：menubg .gif（導航的背景圖）
　　二、會員登陸：login.gif 如：loginbg.gif （會員登錄的背景圖）
　　三、搜索命名：search.gif 如：search_bg.gif （搜索的背景圖）
　　四、小 圖 標：ico_數字.gif 如：ico_001.gif
　　五、線的命名：line_X_顏色.gif 如：line_X_red.gif（紅色橫向虛線）說明：line只命名虛線
　　line_Y_red.gif（紅色縱向虛線）
　　六、廣告命名：ad_數字.gif 如：ad001.gif
　　七、其它欄目的圖片：以欄目名的第一個字母.gif
　　如：xwzx_bg.gif （新聞中心背景） cpzx_l.gif （產品中心的左邊圖）
　　八、產品與欄目熱點圖片： pic_數字.gif 如：pic_001.gif
　　說明：上、下、左、右 能夠縮寫爲T、B、L、R
四、CSS標準化設計命名

　　4.一、類class的命名規範示例
　　頭：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
　　4.二、註釋的寫法
　　/ Footer /
　　內容區
　　/ End Footer /
　　4.三、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
　　4.四、類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 { }
　　4.五、CSS文件命名示例
　　主要的 master.css
　　模塊 module.css
　　基本共用 base.css
　　佈局，版面 layout.css
　　主題 themes.css
　　專欄 columns.css
　　文字 font.css
　　表單 forms.css
　　補丁 mend.css
　　打印 print.css
　　4.六、注意事項
　　（1）一概小寫；
　　（2）儘可能用英文；
　　（3）不加中槓和下劃線；
　　（4）儘可能不縮寫，除非一看就明白的單詞

 

原文：https://www.cnblogs.com/7qin/archive/2018/09/07/9602131.html