橫向書寫特點(diǎn):
- 最大化的利用了空間,單屏內(nèi)能顯示更多,減小了縱向滾動(dòng)條出現(xiàn)的幾率,能夠快速捕獲較多的信息。
- 減小了文件大小,省去了不必要的空格、換行等。
- 橫向書寫方便分塊以及注釋,便于查看CSS結(jié)構(gòu),選擇符一目了然。當(dāng)今顯示器正朝著越來(lái)越大,越來(lái)越寬發(fā)展,基本上一行內(nèi)可以顯示完全。
- 加快編寫CSS速度,不用每次敲換行和tab,并且減少拉動(dòng)滾動(dòng)條的次數(shù)。
- 如果是活動(dòng)頁(yè),不用作壓縮處理。使用CSS optimizers 來(lái)優(yōu)化CSS是提倡的,但是使用橫向書寫,基本上不存在多余的空格和換行,因此可以不用壓縮,這樣效率和能力都會(huì)得到提高。
- 便于閱讀和查找相關(guān)結(jié)構(gòu)。代碼編輯器對(duì)同行數(shù)定位做的都比較好,因此我們要解決的是如何快速縱向定位目標(biāo)。橫向書寫時(shí)選擇符縱向?qū)R,再加上
.class_name_2 .class_name_2_1 .class_name_2_1_1的選擇符層次分明,因此很容易定位到目標(biāo)。 在調(diào)試小Bug的時(shí)候就可以直接打開CSS更改,不用再打開firebug去找到模塊。
- 橫向書寫,是基于CSS選擇符的寫法,層次容易對(duì)比,更利于模塊化。對(duì)整體CSS規(guī)劃有好處,后期維護(hù)成本低。
- 便于不同版本的CSS代碼對(duì)比。
存在的問(wèn)題:書寫過(guò)密,從而影響閱讀。這種弊端顯而易見(jiàn),但只要優(yōu)化做到家,這種狀況會(huì)很少。
盡管對(duì)于現(xiàn)如今的帶寬來(lái)說(shuō),網(wǎng)頁(yè)文件那僅以K為單位的大小實(shí)在是微不足道,但如何將這以K來(lái)計(jì)算的網(wǎng)頁(yè)文件精簡(jiǎn)到最小還是網(wǎng)頁(yè)設(shè)計(jì)師們應(yīng)該考慮的問(wèn)題之一。而橫向書寫省去了不必要的空格、換行等,大大減小了文件大小。我們不能說(shuō)哪種書寫是對(duì)的,至于具體采用哪種寫法依個(gè)人選擇,當(dāng)然改變習(xí)慣可能會(huì)影響一個(gè)人的工作效率,那我們提倡的是:提交的CSS樣式文件是經(jīng)過(guò)代碼格式化的,而這個(gè)工作可以完全交給DW等工具,我們只要點(diǎn)擊一下,整個(gè)文件就會(huì)像我們想象的那樣呈現(xiàn)出來(lái)。這樣的代碼看起來(lái)很舒服,修改容易,團(tuán)隊(duì)成員在后續(xù)交接也會(huì)變得更加順利。
PS: Dreamweaver下代碼格式的設(shè)置方法:
點(diǎn)擊上圖放大
原文:http://webteam.tencent.com/?p=1080
本文鏈接:http://www.95time.cn/tech/web/2009/6810.asp
出處:騰訊Webteam
責(zé)任編輯:bluehearts
上一頁(yè) 談CSS書寫風(fēng)格 [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|