CSS注釋、命名、繼承性、樣式排序等CSS技巧的小結(jié)
更新時間:2007年09月22日 22:07:07 作者:
一、關(guān)于注釋
在創(chuàng)建xhtml+CSS網(wǎng)站時,CSS中的注釋非常重要。在創(chuàng)建CSS樣式時,應(yīng)當(dāng)保持隨手注釋的習(xí)慣。一般的,我習(xí)慣于使用“/* 注釋內(nèi)容 */”的格式來寫注釋,因為在EditPlus等具有高亮功能的編輯器里,使用C語言中常用的“/***************/”之類的注釋是無意義的,沒有必要填充大量無意義內(nèi)容作為分隔。帶有注釋的文檔作為網(wǎng)站的原始CSS文檔,在發(fā)布網(wǎng)站的時候,可以使用CSS壓縮工具壓縮CSS,在輸出的CSS中去掉注釋以提高文件傳輸效率。
二、關(guān)于命名
在給CSS文件命名的時候,我比較喜歡使用符合語義的英文名或者縮寫命名,在非常用部分也許會用部分拼音命名。另外,在某些有從屬關(guān)系的class里,我可能會使用類似“l(fā)ist_banner”之類的命名,即父元素名加上“_”再加上元素名。
關(guān)于命名,可以根據(jù)團隊設(shè)計師的習(xí)慣進行協(xié)商。但最好在命名之后加上注釋,以便將來生成文檔備查。
三、關(guān)于繼承性
在CSS中,要善用繼承性。比如在兩個嵌套的div中,父元素定義了background-color屬性為黑色,如果子元素的背景同為黑色,則不需重復(fù)定義。善于利用CSS的繼承性可以讓代碼更有效、更精簡。
四、關(guān)于CSS定義的層次
在定義CSS中的class時,建議使用層次分明的方式來描述語句。
示例結(jié)構(gòu):
Example Source Code [www.52css.com]
<div id="menu">
<div class="menulist">
<div class="selectit"></div>
</div>
</div>
示例CSS:
Example Source Code [www.52css.com]
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
在上例中,從最終效果來看,#menu沒有必要重復(fù)出現(xiàn),但是實際上如果能夠在前面加上#menu,將會讓文檔的層次更加明了,更利于閱讀。
五、關(guān)于樣式排序
在設(shè)計CSS樣式表時,我們大多是手寫代碼,這樣很容易造成class中的樣式排序混亂。比如有幾個class中用到了padding、margin、background、color等樣式,但是排序的時候,有的class是background比較靠前,有的是margin比較靠前。這樣就造成了一定的混亂,容易讓思路受挫。我建議個人或者團隊的設(shè)計師協(xié)定一個大致順序,這樣從個別來說看不出太大差別,但從整體上將更加易于閱讀和管理,整體效率會提高不少。
比如,我默認將width、height和padding、margin、border等放在較靠前的位置,background其次,然后是控制文本的font、color、text-align等,接著是某些特殊標(biāo)簽才能用到的元素,像list-style等,最后是css濾鏡。當(dāng)遇到特殊情況時(比如CSS某些屬性的優(yōu)先級需要定義)可以靈活處理。
在創(chuàng)建xhtml+CSS網(wǎng)站時,CSS中的注釋非常重要。在創(chuàng)建CSS樣式時,應(yīng)當(dāng)保持隨手注釋的習(xí)慣。一般的,我習(xí)慣于使用“/* 注釋內(nèi)容 */”的格式來寫注釋,因為在EditPlus等具有高亮功能的編輯器里,使用C語言中常用的“/***************/”之類的注釋是無意義的,沒有必要填充大量無意義內(nèi)容作為分隔。帶有注釋的文檔作為網(wǎng)站的原始CSS文檔,在發(fā)布網(wǎng)站的時候,可以使用CSS壓縮工具壓縮CSS,在輸出的CSS中去掉注釋以提高文件傳輸效率。
二、關(guān)于命名
在給CSS文件命名的時候,我比較喜歡使用符合語義的英文名或者縮寫命名,在非常用部分也許會用部分拼音命名。另外,在某些有從屬關(guān)系的class里,我可能會使用類似“l(fā)ist_banner”之類的命名,即父元素名加上“_”再加上元素名。
關(guān)于命名,可以根據(jù)團隊設(shè)計師的習(xí)慣進行協(xié)商。但最好在命名之后加上注釋,以便將來生成文檔備查。
三、關(guān)于繼承性
在CSS中,要善用繼承性。比如在兩個嵌套的div中,父元素定義了background-color屬性為黑色,如果子元素的背景同為黑色,則不需重復(fù)定義。善于利用CSS的繼承性可以讓代碼更有效、更精簡。
四、關(guān)于CSS定義的層次
在定義CSS中的class時,建議使用層次分明的方式來描述語句。
示例結(jié)構(gòu):
Example Source Code [www.52css.com]
<div id="menu">
<div class="menulist">
<div class="selectit"></div>
</div>
</div>
示例CSS:
Example Source Code [www.52css.com]
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
在上例中,從最終效果來看,#menu沒有必要重復(fù)出現(xiàn),但是實際上如果能夠在前面加上#menu,將會讓文檔的層次更加明了,更利于閱讀。
五、關(guān)于樣式排序
在設(shè)計CSS樣式表時,我們大多是手寫代碼,這樣很容易造成class中的樣式排序混亂。比如有幾個class中用到了padding、margin、background、color等樣式,但是排序的時候,有的class是background比較靠前,有的是margin比較靠前。這樣就造成了一定的混亂,容易讓思路受挫。我建議個人或者團隊的設(shè)計師協(xié)定一個大致順序,這樣從個別來說看不出太大差別,但從整體上將更加易于閱讀和管理,整體效率會提高不少。
比如,我默認將width、height和padding、margin、border等放在較靠前的位置,background其次,然后是控制文本的font、color、text-align等,接著是某些特殊標(biāo)簽才能用到的元素,像list-style等,最后是css濾鏡。當(dāng)遇到特殊情況時(比如CSS某些屬性的優(yōu)先級需要定義)可以靈活處理。
相關(guān)文章
div+css實現(xiàn)的滑動門,簡潔,新手上路 (小鴿子系列)
div+css實現(xiàn)的滑動門,簡潔,新手上路 (小鴿子系列)...2007-03-03CSSvista可同時在IE和Fifrefox調(diào)試的CSS編輯提供下載
CSSvista:可同時在IE和Fifrefox調(diào)試的CSS編輯器 CSSvista是一個免費的Windows增強應(yīng)用程序,為Web開發(fā)人員準(zhǔn)備的一個CSS編輯器。它可以讓你同時在IE和Firefox下調(diào)試你的CSS樣式表代碼。2008-06-06DIV+CSS布局的網(wǎng)站對網(wǎng)站SEO的影響分析
DIV+CSS布局的網(wǎng)站對網(wǎng)站SEO的影響分析...2007-09-09htm頁面中<a name>加name和id的沖突附解決方法
原來在<a name="jb51"> 和<span id="jb51">是沖突的,唉弄了好一會,郁悶 臨時解決方法就是在后面的id中加了一個2,就是<span id="jb512">2008-07-07