CSS經驗:與您分享六個CSS習慣

來源:互聯網
上載者:User
一、用class_name方式寫類名。

以前喜歡用class-name寫,不過好像兩樣也沒什麼差別。但我比較反對用className寫類名,因為始終對瀏覽器大小寫敏感的問題抱有懷疑態度。但是id我會寫成駝峰式,理由見下一條。

二、樣式都用class而不用id。
有三個理由,一,id不可以重複,所以用class的話,可以肆無忌憚的用無數次。二,id的優先順序太高,若是寫了一個#page_content a {color:#f60} ,那你完蛋了,裡面要改連結顏色,都必須加上#page_content才能越過這個優先順序。三,id專門留給JS用,這樣才符合表現與行為分離的原則。所以id我用駝峰式,也是為了體現這一點。

三、margin和padding,盡量省略最後一個值。
比如margin: 20px 10px 5px 10px; ,左右值是一樣的,就應該省略掉最後一個值,寫成margin: 20px 10px 5px; 這樣到時候要改左右間距,改一個就好,免得改漏了。其實這個問題雖然很細小,但是可以看得出對margin四個值省略規則的熟練程度。

四、按標準寫CSS,再針對特定瀏覽器作hack。
比如,通常我們會遇到如下的寫法:

.side_col {
    float:left;
    display: inline;
    margin-left: 20px;
}
而我的寫法會是:

.side_col {
    float: left;
    margin-left: 20px;
}
*   .side_col {
    _display:inline;  /*hacked for IE 6*/
}
看明白了嗎?不應該把hack混在一起,也不應該用一種僥倖的心態,覺得float:left與display:inline寫在一起沒事。嗯,它們倆 確實沒事兒,但是其他的hack就不一定了。而且這裡寫display:inline純粹就是為瞭解決IE6的bug,所以前面加上底線,以明確的表達 你的目的。
另外不要以為凡是hack都是為IE準備的。其實有些hack是針對其他瀏覽器的,比如FF。這就要求你對CSS標準的熟練掌握,能夠自信的判斷哪些渲染是遵守標準,哪些違反標準的。
此外,我喜歡在hack前面加上星號,其實這純粹是個人習慣了。可能過段時間我就不這麼用了,呵呵。

五、記得加空格。
.class_name { property: value; } 。我個人覺得合理的空格是優秀代碼的一個指標。按英文的習慣,標點後面都應該帶空格(如果你寫This is a pen.That’s a pencil.句點後面不加空格, word裡面會有錯誤提示)。所以既然CSS是外國人發明的,應該按他們的格式來寫。類似的,在JS裡var a = b + c;裡面的空格也應該都要加。

六、適當的層疊(Cascading)或縮排以定義CSS的“範圍”。

啥叫“CSS的範圍”?其實並不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊裡面,比如“導覽列”裡的“搜尋方塊”,可能應該寫成:

.nav .search {}
而有時候用層疊會增加代碼優先順序,所以也可以用縮排來“象徵性的”體現範圍。像這樣:

.login_box {}
   .forgot_pwd{}
縮排,是為了表示它們對應的標籤具有父子關係。但這樣只能起一個提醒的作用。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.