DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS中實現id與class命名及編碼的六大技巧
CSS中實現id與class命名及編碼的六大技巧
編輯:CSS詳解     

CSS網頁布局目前是比較主流的網頁布局技術,這裡和大家重點討論一下CSS網頁布局id與class命名及編碼的6個最佳習慣,相信本文介紹一定會讓你有所收獲。

CSS網頁布局id與class命名及編碼的6個最佳習慣

一、用class_name方式寫類名

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

二、樣式都用class而不用id

有三個理由。

1,id不可以重復,所以用class的話,可以肆無忌憚的用無數次。
2,id的優先級太高,若是寫了一個#page_contenta{color:#f60},那你完蛋了,裡面要改鏈接顏色,都必須加上#page_content才能越過這個優先級。
3,id專門留給JS用,這樣才符合表現與行為分離的原則。所以id我用駝峰式,也是為了體現這一點。

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

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

四、按標准寫CSS,再針對特定浏覽器作hack

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

ExampleSourceCode

  1. .side_col_52CSS{
  2. float:left;
  3. display:inline;
  4. margin-left:20px;
  5. }

而我的寫法會是:

ExampleSourceCode

  1. .side_col_52CSS{
  2. float:left;
  3. margin-left:20px;
  4. }
  5. *.side_col_52CSS{
  6. _display:inline;/*hackedforIE6*/
  7. }

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

五、記得加空格

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

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

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

ExampleSourceCode

  1. .nav.search{}

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

ExampleSourceCode

  1. .login_box{}
  2. .forgot_pwd{}

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

文章來源:Div-Css.net設計網參考:http://www.div-CSS.Net/div_CSS/topic/index.ASP?id=6851

【編輯推薦】

  1. DIV CSS隱藏內容樣式方法詳解
  2. IE6.0對padding的解讀分析
  3. 揭露CSS中margins折疊現象內幕
  4. 七大CSS選擇符用法說明
  5. 技術分享 如何使用CSS控制超鏈接文字樣式
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved