合肥市高新區(qū)長(zhǎng)江西路與科學(xué)大道交口5F創(chuàng)業(yè)園A座309
136 5560 1775

淺談CSS樣式表書寫的一些基本格式

發(fā)表日期:2010-07-21 瀏覽次數(shù):2280次

   我們?cè)谧鼍W(wǎng)頁(yè)設(shè)計(jì)的時(shí)候,css是一個(gè)很重要的因素,如何證正確的書定css的格式。對(duì)網(wǎng)站建設(shè)者來(lái)說(shuō)也是有一定的標(biāo)準(zhǔn)的。今天啟邁網(wǎng)絡(luò)就和大家說(shuō)說(shuō)css書寫的一些基本格式。

  分類,一個(gè)模塊或者同類功能定義為一類定義,每類定義之間用段落隔開(kāi);

        分級(jí),每類定義中的每個(gè)定義語(yǔ)句,根據(jù)結(jié)構(gòu)或語(yǔ)意級(jí)別使用Tab縮進(jìn)縱向?qū)R;

        分?jǐn)?,每個(gè)定義內(nèi)的每個(gè)屬性定義之間,用“分號(hào)+空格”隔開(kāi),注意定義語(yǔ)句與分號(hào)間無(wú)空

格,“{}”內(nèi)前有空格而后無(wú)空格;

        連排,每個(gè)定義不換行,一直橫排。某些編輯器會(huì)自動(dòng)換行,但無(wú)大影響,畢竟定義語(yǔ)句很

長(zhǎng)的是少數(shù);

        我理解的優(yōu)點(diǎn)為:一是程序結(jié)構(gòu)清晰易讀,不會(huì)眼花繚亂而影響發(fā)揮;二是最大化利用了空

間,單屏內(nèi)能顯示更多定義,提高了開(kāi)發(fā)效率,敲回車和空格肯定是空格更方便。當(dāng)然,如果需要做

的更好,還得加上合理的注釋。

        有人質(zhì)疑這么書寫可能會(huì)造成太擠密,從而導(dǎo)致橫排閱讀困難。這種弊端是顯而易見(jiàn)的,但

實(shí)際應(yīng)用中,大面積復(fù)雜語(yǔ)句堆在一起的情況,與CSS定義精髓相沖突。也就是說(shuō),只要優(yōu)化做到家,

這種狀況會(huì)很少。

        另外使用某些編輯器也能避免這些問(wèn)題,比如UltraEdit有一個(gè)橫排操作區(qū)域提示,用來(lái)代替

記事本快速編輯時(shí)很有效。


       關(guān)于書寫習(xí)慣,遵循曾經(jīng)總結(jié)過(guò)的風(fēng)格標(biāo)準(zhǔn),現(xiàn)在一點(diǎn)都沒(méi)有變。并且近來(lái)翻看高手作品,橫

向連排似乎在大產(chǎn)品項(xiàng)目中逐漸成為主流,個(gè)人認(rèn)為如此維護(hù)效率的確更高,并且未來(lái)顯示器肯定是

朝越來(lái)越大、越來(lái)越寬發(fā)展。

        通常我維護(hù)別人作品第一步都是調(diào)整空格,基本下圖這個(gè)造型的樣式表都是我寫的,只有我

這種眼里不揉沙子的人才對(duì)多個(gè)、少個(gè)空格如此敏感。至于效果上有什么影響,不妨對(duì)比參考。代碼

編輯器對(duì)同行數(shù)定位做的都比較好,因此我們要解決的是如何快速縱向定位目標(biāo)。
并且我觀察到最近流行的柵格化、漸進(jìn)增強(qiáng)等設(shè)計(jì)理念,都可以很好應(yīng)用到樣式表設(shè)計(jì)上。好代碼應(yīng)

該清晰上下、左右分級(jí),適當(dāng)?shù)姆謮K、留白將有助于模塊化設(shè)計(jì),大大提高可擴(kuò)展性、可復(fù)用性、可

維護(hù)性,總的來(lái)說(shuō),書寫有如下四個(gè)方面值得探討,并積累個(gè)人習(xí)慣:

命名

屬性書寫順序

屬性書寫格式

注釋格式
 


將文章分享到:

版權(quán)所有:?jiǎn)⑦~科技-合肥網(wǎng)站建設(shè) 皖I(lǐng)CP備19009304號(hào)-1 皖公網(wǎng)安備 34010402702162號(hào)

網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì)公司啟邁科技,為眾多企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站制作,響應(yīng)式網(wǎng)站設(shè)計(jì),手機(jī)網(wǎng)站建設(shè),微網(wǎng)站,模板建站,企業(yè)郵箱等一站式互聯(lián)網(wǎng)解決方案和建站服務(wù)10年。