DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 談DIV+CSS樣式表命名的規則方法
談DIV+CSS樣式表命名的規則方法
編輯:CSS詳解     

DIV+CSS樣式表命名不能隨意而為,否則以後進行維護時困難很大。如同軟件開發中對類名的仔細處理一樣,DIV+CSS樣式表命名也需要遵循規則。

如果要是就幾行或幾十行代碼吧!就根據英文單詞就行了。可是要是多了那就不好寫了,有時候就直接用漢語拼音或拼音的首字母代替。可是多了吧,自己寫的都看不出是什麼意思,別說再讓程序員調用這些樣式了。DIV+CSS樣式表的id和class的區別:就一句來概括, class可以定義多個值並且可以應用到多個標簽上,但id只能是一個。所以就開始查一些相關的DIV+CSS樣式表id和class的常用命名規則,請大家參考一下:

首先講一下DIV+CSS樣式表的id的常用命名規則如下表所示:

頁頭 header 登錄條 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+CSS樣式表的id命名也會經常用大小寫和_來區分,比如主導航就是MainNav,如果還有必要在區分就是MainNav_1,MainNav_2等等。也可以使用"類型+變量名稱"的規則來命名,比如寫一個紅色字體的class,可以.f_red {}(f是font 字體的縮寫)。總之原則是:大小寫、_、縮寫,大大增強代碼的可讀性。

再講一下DIV+CSS樣式表的class的常用命名規則如下表所示:

外 套 wrap 主導航 mainNav 子導航 subnav 頁 腳 footer 整個頁面 content 頁 眉 header 商 標 label 標 題 title 主導航 mainNav 邊導航 sidebar 左導航 leftsideBar 右導航 rightsideBar 旗 志 logo 標 語 banner 菜單內容 menu1Content 菜單容量 menuContainer 子菜單 submenu 邊導航圖標 sidebarIcon 注釋 note 面包屑 breadCrumb 容器 container 內容 content 搜索 search 登陸 login 功能區 shop 當前的 current
當然像DIV+CSS樣式表的id和class的命名遠遠不止這些,可能還會有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的DIV+CSS樣式表的id和class的命名規則的話,請留言,多多指教.

本文來自百洋軟件研究實驗室博客園博文《怎麼給div+CSS樣式表命名的規則

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved