愛悠閑 > 六個書寫CSS的正確方法能讓你事半功倍【轉自東軟帝國群 北京_蘇二毛】

六個書寫CSS的正確方法能讓你事半功倍【轉自東軟帝國群 北京_蘇二毛】

作者: lc5204118 相關  |  發布日期 : 2015-04-27  |  熱度 : 618°

 關于CSS網頁布局id與class命名或許成為大家比較頭疼的問題,在這里做一些相關的介紹,滿足大家對知識的渴求。

  一、樣式都用class而不用id,有三個理由:

    1,id不可以重復,所以用class的話,可以肆無忌憚的用無數次。

    2,id的優先級高,若是寫了一個#page_content a {color:#f60} ,那要改鏈接顏色,都必須加上#page_content才能越過這個優先級。

    3,id專門留給JS用,這樣才符合表現與行為分離的原則。id用駝峰式,也是為了體現這一點。

   二、用class_name方式寫類名

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

    三、margin和padding,盡量省略最后一個值。

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

    四、按標準寫css,再針對特定瀏覽器作hack

    比如,通常我們會遇到如下的寫法:

.side_col_webjx {

float:left;

display: inline;

margin-left: 20px;

}

    而我的寫法會是:

.side_col_webjx {

float: left;

margin-left: 20px;

}

* .side_col_webjx {

_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; } 。我個人覺得合理的空格是優秀代碼的一個指標。按英文的習慣,標點后面都應該帶空格。既然css是外國人發明的,應該按他們的格式來寫。類似的,在JS里 var a = b + c;里面的空格也應該都要加。

    六、適當的層疊(Cascading)或縮進以定義css的“作用域”。

    啥叫“css的作用域”?其實并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面,比如“導航欄”里的“搜索框”,可能應該寫成:

.nav .search {}

    而有時候用層疊會增加代碼優先級,所以也可以用縮進來“象征性的”體現作用域。像這樣:

.login_box {}
.forgot_pwd{}

    縮進,是為了表示它們對應的標簽具有父子關系。但這樣只能起一個提醒的作用。



快乐彩中奖说明