div+css設(shè)計(jì)中ID的命名習(xí)慣和規(guī)范

大家都知道規(guī)范的css命名可以增強(qiáng)樣式規(guī)則的可讀性，便于后來(lái)你或別人對(duì)頁(yè)面的修改。起初我寫(xiě)css規(guī)則的時(shí)候,用漢語(yǔ)的縮寫(xiě)來(lái)命名，現(xiàn)在看來(lái)是很不專(zhuān)業(yè)的，也給我的后期維護(hù)浪費(fèi)精力。

根據(jù)自己的而寫(xiě)法習(xí)慣和網(wǎng)上的一些寫(xiě)法，我總結(jié)了一套適用自己的id命名寫(xiě)法.拿出來(lái)曬一曬。

CSS 類(lèi)和ID的常用命名：

網(wǎng)站頭部: head/header(頭部) top（頂部）

導(dǎo)航： nanv 導(dǎo)航具體區(qū)分：topnav(頂部導(dǎo)航)、mainnav(主導(dǎo)航)、mininav(迷你導(dǎo)航)、textnav(導(dǎo)航文本)、subnav(子導(dǎo)航/二級(jí)導(dǎo)航)

旗幟、廣告和商標(biāo)：logo（旗幟）、brand(商標(biāo))、banner(標(biāo)語(yǔ))

搜索：sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按鈕)、sreachinput（搜索輸入框）

注冊(cè)和登錄：login(登錄)、regsiter(注冊(cè))、userbox(用戶名/通行證的文本框)、password(密碼)

布局、分欄和框： layout(布局)、bigdiv(大div)、leftdiv(左分欄)、rightdiv(右分欄)、leftfloat(左浮動(dòng))、rightfloat(右浮動(dòng))、mainbox()、subpage(子頁(yè)面/二級(jí)頁(yè)面)

頁(yè)腳/底部：foot/footer(頁(yè)腳/底部)、copyright(版權(quán)信息)、sitemap(網(wǎng)站地圖)

其他：content(內(nèi)容)、skin(皮膚)、title(標(biāo)題)、from(表單)、pic(圖片)、news(新聞)、shop(購(gòu)物區(qū))、list(列表/清單)、newslist(新聞列表)、downloadlist(下載列表)、piclist(圖片列表)、dropmenv(下拉菜單)、cor/corner(圓角)、homepage(首頁(yè))、crumb(當(dāng)前位置導(dǎo)航)

實(shí)際上上面的id命名我會(huì)經(jīng)常用大小寫(xiě)和_來(lái)區(qū)分，比如主導(dǎo)航就是MainNav,如果還有必要在區(qū)分就是MainNav_1,MainNav_2等等。也可以使用"類(lèi)型+變量名稱"的規(guī)則來(lái)命名，比如寫(xiě)一個(gè)紅色字體的class,可以.f_red {}(f是font 字體的縮寫(xiě))。總之原則是：大小寫(xiě)、_、縮寫(xiě)，大大增強(qiáng)代碼的可讀性。

另外我還經(jīng)常使用"in"的寫(xiě)法做子divd的命名，寫(xiě)法in+父div,這樣可以避免前面命名過(guò)了后面div不知道怎么去命名。比如intop、inbox、infrom、inlogin等等。

沒(méi)有一個(gè)真正標(biāo)準(zhǔn)的命名規(guī)范，每個(gè)人都有自己的一套寫(xiě)法。但是要盡量向大家所認(rèn)同的規(guī)范上靠，畢竟這在團(tuán)隊(duì)合作上有莫大的益處。