書(shū)寫(xiě)CSS的5個(gè)小技巧讓你的樣式更規(guī)范
發(fā)布時(shí)間:2013-08-13 11:47:36 作者:佚名
我要評(píng)論

CSS在書(shū)寫(xiě)過(guò)程中會(huì)一些小技巧,會(huì)省時(shí)省力,比如按字母順序來(lái)排列css、先標(biāo)記 后css等等,本文整理了一些,感興趣的朋友可以參考下希望對(duì)大家書(shū)寫(xiě)css有所幫助
1. 按字母順序來(lái)排列css
不按字母順序排的:
div#header h1 {
z-index: 101;
color: #000;:
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母順序排的:
div#header h1 {
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è)選擇器的所有屬性寫(xiě)在一行,還是每個(gè)屬性寫(xiě)一行比較好。如果你就喜歡寫(xiě)在一行,因?yàn)槊颗艑?xiě)一行會(huì)讓整個(gè)文檔感覺(jué)太長(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)記弄好后再寫(xiě)css會(huì)比較不容易出錯(cuò)。比如寫(xiě)一個(gè)頁(yè)面,先寫(xiě)一個(gè)最基本的標(biāo)記結(jié)構(gòu)<body>
<div id="wrapper">
<div id="header"><!--end #header-->
<div id="container">
<div id="content">
</div><!--end #content-->
<div id="sidebar">
</div><!--end #sidebarr-->
</div><!--end #container-->
<div id="footer">
</div>!<--end #footer-->
</div><!--end #wrapper-->
</body>
然后就是盡量善用子選擇器,而不是一要給哪個(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è)就好了嘛。
不按字母順序排的:
復(fù)制代碼
代碼如下:div#header h1 {
z-index: 101;
color: #000;:
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母順序排的:
復(fù)制代碼
代碼如下:div#header h1 {
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è)選擇器的所有屬性寫(xiě)在一行,還是每個(gè)屬性寫(xiě)一行比較好。如果你就喜歡寫(xiě)在一行,因?yàn)槊颗艑?xiě)一行會(huì)讓整個(gè)文檔感覺(jué)太長(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)記弄好后再寫(xiě)css會(huì)比較不容易出錯(cuò)。比如寫(xiě)一個(gè)頁(yè)面,先寫(xiě)一個(gè)最基本的標(biāo)記結(jié)構(gòu)<body>
復(fù)制代碼
代碼如下:<div id="wrapper">
<div id="header"><!--end #header-->
<div id="container">
<div id="content">
</div><!--end #content-->
<div id="sidebar">
</div><!--end #sidebarr-->
</div><!--end #container-->
<div id="footer">
</div>!<--end #footer-->
</div><!--end #wrapper-->
</body>
然后就是盡量善用子選擇器,而不是一要給哪個(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è)就好了嘛。
相關(guān)文章
- 這里為大家送上一份CSS代碼書(shū)寫(xiě)規(guī)范究極指南,包括代碼注釋和命名規(guī)范以及空格縮進(jìn)等一應(yīng)俱全,都來(lái)自大家平時(shí)的約定俗成,絕對(duì)值得學(xué)習(xí)借鑒,需要的朋友可以參考下2016-05-27
Discuzx系統(tǒng) CSS 編碼規(guī)范、CSS屬性書(shū)寫(xiě)順序
這篇文章主要介紹了Discuzx系統(tǒng) CSS 編碼規(guī)范、CSS屬性書(shū)寫(xiě)順序,需要的朋友可以參考下2014-10-22CSS書(shū)寫(xiě)規(guī)范、順序和命名規(guī)則
寫(xiě)了這么久的CSS,但大部分前端er都沒(méi)有按照良好的CSS書(shū)寫(xiě)規(guī)范來(lái)寫(xiě)CSS代碼,這樣會(huì)影響代碼的閱讀體驗(yàn),這里總結(jié)一個(gè)CSS書(shū)寫(xiě)規(guī)范、CSS書(shū)寫(xiě)順序供大家參考2014-03-06CSS XTHML書(shū)寫(xiě)規(guī)范以及常見(jiàn)問(wèn)題總結(jié)(頁(yè)面最優(yōu)化)
這是去年為公司培訓(xùn)的時(shí)候?qū)懙恼淼囊粋€(gè)白皮書(shū),希望大家多多提出意見(jiàn)。謝謝!2010-06-01web開(kāi)發(fā)中怎么樣使css書(shū)寫(xiě)規(guī)范?
在web開(kāi)發(fā)中頁(yè)面設(shè)計(jì)時(shí)如何使css書(shū)寫(xiě)規(guī)范是很重要的。正確規(guī)范的書(shū)寫(xiě)css樣式表可以使提高網(wǎng)頁(yè)的速度以及,各種瀏覽器的兼容性,以便于開(kāi)發(fā)程序的人員更好的嵌入程序。2009-10-29- 這篇文章主要給大家介紹CSS 的加載及加載順序以及遇到的問(wèn)題思路解析,文中還給大家補(bǔ)充介紹了關(guān)于html,css,js三者的加載順序問(wèn)題,需要的朋友參考下吧2017-12-25
- CSS在使用選擇器對(duì)元素施加屬性的時(shí)候會(huì)有先后順序,包括特殊性和重要性等概念在內(nèi),這里我們就來(lái)詳解CSS中的選擇器優(yōu)先級(jí)順序,需要的朋友可以參考下2016-06-21
解決CSS3的opacity屬性帶來(lái)的層疊順序問(wèn)題
這篇文章主要介紹了解決CSS3的opacity屬性帶來(lái)的層疊順序問(wèn)題的方法,主要針對(duì)opacity的屬性值小于1的層會(huì)覆蓋在其他層之上的問(wèn)題,需要的朋友可以參考下2016-05-09深入解析CSS中z-index屬性對(duì)層疊順序的處理
這篇文章主要介紹了CSS中z-index屬性對(duì)層疊順序的處理,分情況講解了各種曾跌情況下哪個(gè)box更靠近用戶,需要的朋友可以參考下2016-03-05- css書(shū)寫(xiě)順序,據(jù)網(wǎng)上說(shuō)這個(gè)是Mozilla建議的,讓你的代碼兼容性更好。2010-01-01