css命名規範 頁面結構命名 導航命名 功能命名 CSS樣式命名 CSS樣式表命名 ...
css命名規範
頁面結構命名
- page:代表整個頁面,用於最外層。
- wrap:外套,將所有元素包在一起的一個外圍包,用於最外層
- wrapper:頁面外圍控制整體佈局寬度,用於最外層
- container:一個整體容器,用於最外層
- head、header:頁頭區域,用於頭部
- nav:導航條
- content:內容,網站中最重要的內容區域,用於網頁中部主體
- main:網站中的主要區域(表示最重要的一塊位置),用於中部主體內容
- column:欄目
- sidebar:側欄
- foot、footer:頁尾、頁腳。網站一些附加信息放置區域,(或命名為copyright)用於底部
導航命名
- nav、navbar、navigation、nav-wrapper:導航條或導航包,代表橫嚮導航
- topnav:頂部導航
- mainbav:主導航
- subnav:子導航
- sidebar:邊導航
- leftsidebar 或 sidebar_a :左導航
- rightsidebar 或 sidebar_b:右導航
- title:標題
- summary:摘要/li>
- menu:菜單。區域包含一般的鏈接和菜單
- submenu:子菜單
- drop:下拉
- dorpmenu:下拉菜單
- links:鏈接菜單
功能命名
- logo:標記網站logo標誌
- banner:標語、廣告條、頂部廣告條
- login:登陸,(例如登錄表單:form-login)
- loginbar:登錄條
- regsiter:註冊
- tool、toolbar:工具條
- search:搜索
- searchbar:搜索條
- searchlnput:搜索輸入框
- shop:功能區,表示現在的
- icon:小圖標
- label:商標
- homepage:首頁
- subpage:二級頁面子頁面
- hot:熱門熱點
- list:文章列表,(例如新聞列表:list-news)
- scroll:滾動
- tab:標簽
- sitemap:網站地圖
- msg 或 message:提示信息
- current:當前的
- joinus:加入
- status:狀態
- btn:按鈕,(例如搜索按鈕可寫成:btn-search)
- tips:小技巧
- note:註釋
- guild:指南
- arr、arrow:標記箭頭
- service:服務
- breadcrumb:(即頁面所處位置導航提示)
- download:下載
- vote:投票
- siteinfo:網站信息
- partner:合作伙伴
- link、friendlink:友情鏈接
- copyright:版權信息
- siteinfoCredits:信譽
- siteinfoLegal:法律信息
CSS樣式命名
- 對齊樣式命名:left(左邊內容)、center(中間內容)、right(右邊內容)等;
- 顏色英文命名:red(紅色)、green(綠色)、yellow(黃色),又或者border_red(紅色邊框)等;
- 顏色代碼命名:f00(紅色)、ff0(黃色)、f90(橙色)等;
- 文字大小命名:font12px(字體12像素)、font16px(字體16像素)等;
- 頁麵線條命名:line_x (橫線)、line_y (縱線)或 line_red(紅線)、line_black(黑線)
- 圖片圖標命名:pic_1.jpg、pic_2.jpg 或 ico_1.gif、ico_2.gif
- 頁面廣告命名:ad_01、ad_02
- 背景框架命名:nav_bg(代表導航條的背景圖片位置)、tool_bg(代表工具欄的背景圖片位置)
CSS樣式表命名
- index.css:單獨為首頁建立樣式
- head.css:頭部樣式,多個頁面頭部設計風格相同時使用。
- base.css:共用樣式。
- style.css:獨立頁面所使用的樣式文件。
- global.css:頁面樣式基礎,全局公用樣式,頁面中必須包含。
- layout.css:佈局、版面樣式,公用類型較多時使用,一般用在首頁級頁面和產品類頁面中
- module.css:模塊,用於產品類頁,也可與其它樣式配合使用。
- master.css:主要的樣式表
- columns.css:專欄樣式
- themes.css:主體樣式
- forms.css:表單樣式
- mend.css:補丁,基於以上樣式進行的私有化修補。