建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
如何寫CSS樣式變得更規(guī)范
這篇文章主要講解了“如何寫CSS樣式變得更規(guī)范”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“如何寫CSS樣式變得更規(guī)范”吧！
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的常州網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
1. 按字母順序來(lái)排列css
不按字母順序排的：
代碼如下:
div#header h2 {
z-index: 101;
color: #000;:
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母順序排的：
代碼如下:
div#header h2 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
理由是這樣的：可以更好的找到某個(gè)屬性。
2. 更好的組織css結(jié)構(gòu)
使用css注釋來(lái)給css分組，這樣結(jié)構(gòu)明了，也有利于協(xié)同設(shè)計(jì)。
/*****Reset*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{www.sytm.net}
xxxxx{xxxxx}
3. 保持一致性
不要無(wú)意義的去討論到底一個(gè)選擇器的所有屬性寫在一行，還是每個(gè)屬性寫一行比較好。如果你就喜歡寫在一行，因?yàn)槊颗艑懸恍袝?huì)讓整個(gè)文檔感覺太長(zhǎng)了，找起來(lái)不方便。但是發(fā)給team的另一個(gè)人，他卻喜歡每句排一行，那怎么辦？其實(shí)很簡(jiǎn)單，把css拿去w3c驗(yàn)證，它會(huì)有一份結(jié)果，會(huì)自動(dòng)轉(zhuǎn)換成每排一行。
4. 先標(biāo)記 后css
對(duì)html的標(biāo)記弄好后再寫css會(huì)比較不容易出錯(cuò)。比如寫一個(gè)頁(yè)面，先寫一個(gè)最基本的標(biāo)記結(jié)構(gòu)
代碼如下:
!<--end #footer-->
然后就是盡量善用子選擇器，而不是一要給哪個(gè)元素進(jìn)行樣式化，就給它添加個(gè)選擇器。
5. CSS Reset/重置
你可以copy Eric Meyer Reset, YUI Reset或其它c(diǎn)ss reset, 但你接下來(lái)應(yīng)該根據(jù)你的項(xiàng)目改成你自己的reset.
* { margin: 0; padding: 0; }這句并不適用一些元素比如單選按鈕，不過(guò)有單選按鈕就重新給單選按鈕重設(shè)就好了嘛。
感謝各位的閱讀，以上就是“如何寫CSS樣式變得更規(guī)范”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)如何寫CSS樣式變得更規(guī)范這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
本文題目：如何寫CSS樣式變得更規(guī)范
標(biāo)題鏈接：http://fisionsoft.com.cn/article/jcesjg.html
