您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“CSS布局中的ID和Class類命名規(guī)則”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS布局中的ID和Class類命名規(guī)則”吧!
CSS網(wǎng)頁布局ID和Class類的命名介紹
一、用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。
比如,通常我們會遇到如下的寫法:
.side_col_webjx{ float:left; display:inline; margin-left:20px; }
而我的寫法會是:
.side_col_webjx{ float:left; margin-left:20px; } *.side_col_webjx{ _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)的。
五、記得加空格。
.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)該寫成:
.nav.search{}
而有時候用層疊會增加代碼優(yōu)先級,所以也可以用縮進(jìn)來“象征性的”體現(xiàn)作用域。像這樣:
.login_box{} .forgot_pwd{}
縮進(jìn),是為了表示它們對應(yīng)的標(biāo)簽具有父子關(guān)系。但這樣只能起一個提醒的作用。
到此,相信大家對“CSS布局中的ID和Class類命名規(guī)則”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。