- 相關(guān)推薦
CSS制作教程
有些習慣顯得尤為重要，今天與您分享六個(gè)CSS習慣。因為習慣其實(shí)是會(huì )變的，所以只能寫(xiě)“最近”的。這些習慣都跟技術(shù)無(wú)關(guān)，如果不遵守，也不會(huì )出錯。但是我覺(jué)得良好的習慣會(huì )體現一個(gè)人的素質(zhì)。 我們在中向大家介紹過(guò)很多CSS經(jīng)驗與技巧，這些東西都發(fā)布在/css/的文章中，相信對大家是有一些幫助與啟發(fā)的。有些習慣顯得尤為重要，今天與您分享六個(gè)CSS習慣。因為習慣其實(shí)是會(huì )變的，所以只能寫(xiě)“最近”的。這些習慣都跟技術(shù)無(wú)關(guān)，如果不遵守，也不會(huì )出錯。但是我覺(jué)得良好的習慣會(huì )體現一個(gè)人的素質(zhì)。
一、用class_name方式寫(xiě)類(lèi)名。
以前喜歡用class-name寫(xiě)，不過(guò)好像兩樣也沒(méi)什么差別。但我比較反對用className寫(xiě)類(lèi)名，因為始終對瀏覽器大小寫(xiě)敏感的問(wèn)題抱有懷疑態(tài)度。但是id我會(huì )寫(xiě)成駝峰式，理由見(jiàn)下一條。
二、樣式都用class而不用id。
有三個(gè)理由，一，id不可以重復，所以用class的話(huà)，可以肆無(wú)忌憚的用無(wú)數次。二，id的優(yōu)先級太高，若是寫(xiě)了一個(gè)#page_contenta{color:#f60}，那你完蛋了，里面要改鏈接顏色，都必須加上#page_content才能越過(guò)這個(gè)優(yōu)先級。三，id專(zhuān)門(mén)留給JS用，這樣才符合表現與行為分離的原則。所以id我用駝峰式，也是為了體現這一點(diǎn)。
三、margin和padding，盡量省略最后一個(gè)值。
比如margin:20px10px5px10px;，左右值是一樣的，就應該省略掉最后一個(gè)值，寫(xiě)成margin:20px10px5px;這樣到時(shí)候要改左右間距，改一個(gè)就好，免得改漏了。其實(shí)這個(gè)問(wèn)題雖然很細小，但是可以看得出對margin四個(gè)值省略規則的熟練程度。
四、按標準寫(xiě)CSS，再針對特定瀏覽器作hack。
比如，通常我們會(huì )遇到如下的寫(xiě)法：
.side_col{
float:left;
display:inline;
margin-left:20px;
}
而我的寫(xiě)法會(huì )是：
.side_col{
float:left;
margin-left:20px;
}
*.side_col{
_display:inline;/*hackedforIE6*/
}
看明白了么？不應該把hack混在一起，也不應該用一種僥幸的心態(tài)，覺(jué)得float:left與display:inline寫(xiě)在一起沒(méi)事。嗯，它們倆確實(shí)沒(méi)事兒，但是其他的hack就不一定了。而且這里寫(xiě)display:inline純粹就是為了解決IE6的bug，所以前面加上下劃線(xiàn)，以明確的表達你的目的。
另外不要以為凡是hack都是為IE準備的。其實(shí)有些hack是針對其他瀏覽器的，比如FF。這就要求你對CSS標準的熟練掌握，能夠自信的判斷哪些渲染是遵守標準，哪些違反標準的。
此外，我喜歡在hack前面加上星號，其實(shí)這純粹是個(gè)人習慣了�？赡苓^(guò)段時(shí)間我就不這么用了，呵呵。
五、記得加空格。
.class_name{property:value;}。我個(gè)人覺(jué)得合理的空格是優(yōu)秀代碼的一個(gè)指標。按英文的習慣，標點(diǎn)后面都應該帶空格（如果你寫(xiě)Thisisapen.That’sapencil.句點(diǎn)后面不加空格，word里面會(huì )有錯誤提示）。所以既然CSS是外國人發(fā)明的，應該按他們的格式來(lái)寫(xiě)。類(lèi)似的，在JS里vara=b c;里面的空格也應該都要加。
六、適當的層疊（Cascading)或縮進(jìn)以定義CSS的“作用域”。
啥叫“CSS的作用域”？其實(shí)并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面，比如“導航欄”里的“搜索框”，可能應該寫(xiě)成：
.nav.search{}
而有時(shí)候用層疊會(huì )增加代碼優(yōu)先級，所以也可以用縮進(jìn)來(lái)“象征性的”體現作用域。像這樣：
.login_box{}
.forgot_pwd{}
縮進(jìn)，是為了表示它們對應的標簽具有父子關(guān)系。但這樣只能起一個(gè)提醒的作用。
CSS技巧在于不斷的總結與對編碼的理解，任何時(shí)候都是在不斷的完善的，有何經(jīng)驗歡迎您來(lái)52CSS.com與我分享，也可以在W3Cbbs.com發(fā)貼，寫(xiě)出您對CSS的心得體會(huì )。
【CSS制作教程】相關(guān)文章：
css屬性定位教程07-23
CSS入門(mén)教程01-25
CSS閉合浮動(dòng)元素教程06-26
CSS選擇器教程06-05
CSS教程之盒模型10-17
關(guān)于網(wǎng)站制作css書(shū)寫(xiě)規范02-26
PPT制作教程10-13
CSS基礎教程之背景圖片07-31
CSS-層疊樣式表基礎教程08-10