建站
咨詢
售后
建站咨詢
新聞中心
CSS網(wǎng)頁布局目前是比較主流的網(wǎng)頁布局技術(shù)，這里和大家重點討論一下CSS網(wǎng)頁布局id與class命名及編碼的6個***習(xí)慣，相信本文介紹一定會讓你有所收獲。
站在用戶的角度思考問題，與客戶深入溝通，找到五原網(wǎng)站設(shè)計與五原網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋五原地區(qū)。
CSS網(wǎng)頁布局id與class命名及編碼的6個***習(xí)慣
一、用class_name方式寫類名
以前喜歡用class-name寫，不過好像兩樣也沒什么差別。但我比較反對用className寫類名，因為始終對瀏覽器大小寫敏感的問題抱有懷疑態(tài)度。但是id我會寫成駝峰式，理由見下一條。
二、樣式都用class而不用id
有三個理由。
1，id不可以重復(fù)，所以用class的話，可以肆無忌憚的用無數(shù)次。
2，id的優(yōu)先級太高，若是寫了一個#page_contenta{color:#f60}，那你完蛋了，里面要改鏈接顏色，都必須加上#page_content才能越過這個優(yōu)先級。
3，id專門留給JS用，這樣才符合表現(xiàn)與行為分離的原則。所以id我用駝峰式，也是為了體現(xiàn)這一點。
三、margin和padding，盡量省略***一個值
比如margin:20px10px5px10px;，左右值是一樣的，就應(yīng)該省略掉***一個值，寫成margin:20px10px5px;這樣到時候要改左右間距，改一個就好，免得改漏了。其實這個問題雖然很細(xì)小，但是可以看得出對margin四個值省略規(guī)則的熟練程度。
四、按標(biāo)準(zhǔn)寫css，再針對特定瀏覽器作hack
比如，通常我們會遇到如下的寫法：
ExampleSourceCode
- .side_col_52CSS{
- float:left;
- display:inline;
- margin-left:20px;
- }
而我的寫法會是：
ExampleSourceCode
- .side_col_52CSS{
- float:left;
- margin-left:20px;
- }
- *.side_col_52CSS{
- _display:inline;/*hackedforIE6*/
- }
看明白了么？不應(yīng)該把hack混在一起，也不應(yīng)該用一種僥幸的心態(tài)，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實沒事兒，但是其他的hack就不一定了。而且這里寫display:inline純粹就是為了解決IE6的bug，所以前面加上下劃線，以明確的表達(dá)你的目的。
另外不要以為凡是hack都是為IE準(zhǔn)備的。其實有些hack是針對其他瀏覽器的，比如FF。這就要求你對css標(biāo)準(zhǔn)的熟練掌握，能夠自信的判斷哪些渲染是遵守標(biāo)準(zhǔn)，哪些違反標(biāo)準(zhǔn)的。
此外，我喜歡在hack前面加上星號，其實這純粹是個人習(xí)慣了?？赡苓^段時間我就不這么用了，呵呵。
五、記得加空格
.class_name{property:value;}。我個人覺得合理的空格是優(yōu)秀代碼的一個指標(biāo)。按英文的習(xí)慣，標(biāo)點后面都應(yīng)該帶空格（如果你寫Thisisapen.That’sapencil.句點后面不加空格，word里面會有錯誤提示）。所以既然css是外國人發(fā)明的，應(yīng)該按他們的格式來寫。類似的，在JS里vara=b+c;里面的空格也應(yīng)該都要加。
六、適當(dāng)?shù)膶盈B（Cascading)或縮進(jìn)以定義css的“作用域”
啥叫“css的作用域”？其實并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面，比如“導(dǎo)航欄”里的“搜索框”，可能應(yīng)該寫成：
ExampleSourceCode
- .nav.search{}
而有時候用層疊會增加代碼優(yōu)先級，所以也可以用縮進(jìn)來“象征性的”體現(xiàn)作用域。像這樣：
ExampleSourceCode
- .login_box{}
- .forgot_pwd{}
縮進(jìn)，是為了表示它們對應(yīng)的標(biāo)簽具有父子關(guān)系。但這樣只能起一個提醒的作用。
文章來源:Div-Css.net設(shè)計網(wǎng)參考:http://www.div-css.net/div_css/topic/index.asp?id=6851
當(dāng)前標(biāo)題：CSS中實現(xiàn)id與class命名及編碼的六大技巧
文章地址：http://m.5511xx.com/article/coodcep.html
