網頁設計中CSS網頁布局ID和Class類的命名介紹

關於CSS網頁布局id與class命名或許成為大家比較頭疼的問題，為了滿足大家對知識的渴求，現介紹一下CSS網頁布局方法。

　　一、用class_name方式寫類名。　　以前喜歡用class-name寫，不過好像兩樣也沒什麼差別。但我比較反對用className寫類名，因為始終對瀏覽器大小寫敏感的問題抱有懷疑態度。但是id我會寫成駝峰式，理由見下一條。　　二、樣式都用class而不用id。　　有三個理由。　　1，id不可以重複，所以用class的話，可以肆無忌憚的用無數次。　　2，id的優先順序太高，若是寫了一個#page_content a {color:#f60} ，那你完蛋了，裡面要改連結顏色，都必須加上#page_content才能越過這個優先順序。　　3，id專門留給JS用，這樣才符合表現與行為分離的原則。所以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; } 。我個人覺得合理的空格是優秀代碼的一個指標。按英文的習慣，標點後面都應該帶空格（如果你寫This is a pen.That’s a pencil.句點後面不加空格， word裡面會有錯誤提示）。所以既然css是外國人發明的，應該按他們的格式來寫。類似的，在JS裡var a = b + c;裡面的空格也應該都要加。　　六、適當的層疊（Cascading)或縮排以定義css的“範圍”。　　啥叫“css的範圍”？其實並不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊裡面，比如“導覽列”裡的“搜尋方塊”，可能應該寫成：　　.nav .search {}　　而有時候用層疊會增加代碼優先順序，所以也可以用縮排來“象徵性的”體現範圍。像這樣：　　.login_box {}　　.forgot_pwd{}　　縮排，是為了表示它們對應的標籤具有父子關係。但這樣只能起一個提醒的作用。