CSS網(wǎng)頁(yè)布局id和class類(lèi)的命名介紹

2024-07-11 08:22:06

字體：大中小

供稿：網(wǎng)友

　關(guān)于css網(wǎng)頁(yè)布局id與class命名或許成為大家比較頭疼的問(wèn)題，在VeVb.com中早已有相關(guān)的介紹，但還是不能滿(mǎn)足大家對(duì)知識(shí)的渴求。

一、用class_name方式寫(xiě)類(lèi)名。
　　以前喜歡用class-name寫(xiě)，不過(guò)好像兩樣也沒(méi)什么差別。但我比較反對(duì)用classname寫(xiě)類(lèi)名，因?yàn)槭冀K對(duì)瀏覽器大小寫(xiě)敏感的問(wèn)題抱有懷疑態(tài)度。但是id我會(huì)寫(xiě)成駝峰式，理由見(jiàn)下一條。

二、樣式都用class而不用id。
　　有三個(gè)理由。
　　1，id不可以重復(fù)，所以用class的話，可以肆無(wú)忌憚的用無(wú)數(shù)次。
　　2，id的優(yōu)先級(jí)太高，若是寫(xiě)了一個(gè)#page_content a {color:#f60} ，那你完蛋了，里面要改鏈接顏色，都必須加上#page_content才能越過(guò)這個(gè)優(yōu)先級(jí)。
　　3，id專(zhuān)門(mén)留給js用，這樣才符合表現(xiàn)與行為分離的原則。所以id我用駝峰式，也是為了體現(xiàn)這一點(diǎn)。

三、margin和padding，盡量省略最后一個(gè)值。
　　比如margin: 20px 10px 5px 10px; ，左右值是一樣的，就應(yīng)該省略掉最后一個(gè)值，寫(xiě)成margin: 20px 10px 5px; 這樣到時(shí)候要改左右間距，改一個(gè)就好，免得改漏了。其實(shí)這個(gè)問(wèn)題雖然很細(xì)小，但是可以看得出對(duì)margin四個(gè)值省略規(guī)則的熟練程度。

四、按標(biāo)準(zhǔn)寫(xiě)css，再針對(duì)特定瀏覽器作hack。
　　比如，通常我們會(huì)遇到如下的寫(xiě)法：

.side_col_VeVb {
    float:left;
    display: inline;
    margin-left: 20px;
}

　　而我的寫(xiě)法會(huì)是：

.side_col_VeVb {
    float: left;
    margin-left: 20px;
}
*   .side_col_VeVb {
    _display:inline;  /*hacked for ie 6*/
}

　　看明白了么？不應(yīng)該把hack混在一起，也不應(yīng)該用一種僥幸的心態(tài)，覺(jué)得float:left與display:inline寫(xiě)在一起沒(méi)事。嗯，它們倆確實(shí)沒(méi)事兒，但是其他的hack就不一定了。而且這里寫(xiě)display:inline純粹就是為了解決ie6的bug，所以前面加上下劃線，以明確的表達(dá)你的目的。
　　另外不要以為凡是hack都是為ie準(zhǔn)備的。其實(shí)有些hack是針對(duì)其他瀏覽器的，比如ff。這就要求你對(duì)css標(biāo)準(zhǔn)的熟練掌握，能夠自信的判斷哪些渲染是遵守標(biāo)準(zhǔn)，哪些違反標(biāo)準(zhǔn)的。
　　此外，我喜歡在hack前面加上星號(hào)，其實(shí)這純粹是個(gè)人習(xí)慣了。可能過(guò)段時(shí)間我就不這么用了，呵呵。

五、記得加空格。
　　.class_name { property: value; } 。我個(gè)人覺(jué)得合理的空格是優(yōu)秀代碼的一個(gè)指標(biāo)。按英文的習(xí)慣，標(biāo)點(diǎn)后面都應(yīng)該帶空格（如果你寫(xiě)this is a pen.that’s a pencil.句點(diǎn)后面不加空格， word里面會(huì)有錯(cuò)誤提示）。所以既然css是外國(guó)人發(fā)明的，應(yīng)該按他們的格式來(lái)寫(xiě)。類(lèi)似的，在js里var a = b + c;里面的空格也應(yīng)該都要加。

六、適當(dāng)?shù)膶盈B（cascading)或縮進(jìn)以定義css的“作用域”。
　　啥叫“css的作用域”？其實(shí)并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面，比如“導(dǎo)航欄”里的“搜索框”，可能應(yīng)該寫(xiě)成：

.nav .search {}

　　而有時(shí)候用層疊會(huì)增加代碼優(yōu)先級(jí)，所以也可以用縮進(jìn)來(lái)“象征性的”體現(xiàn)作用域。像這樣：

.login_box {}
.forgot_pwd{}

　　縮進(jìn)，是為了表示它們對(duì)應(yīng)的標(biāo)簽具有父子關(guān)系。但這樣只能起一個(gè)提醒的作用。

上一篇：初學(xué)者需要知道WEB標(biāo)準(zhǔn)的前景

下一篇：快速定位到復(fù)雜的CSS BUG問(wèn)題