|
隨著公司業(yè)務(wù)的增加，需求變的越來越多，團(tuán)隊也因此在不斷的擴(kuò)大，我們經(jīng)常會遇到幾個人協(xié)同工作來完成同一件作品或者維護(hù)修改別人作品的時候，那么是什么最讓你最感到困擾呢？我們在實現(xiàn)一個表現(xiàn)復(fù)雜的頁面的同時，CSS文件就會比較繁瑣，眾多的選擇符、屬性讓人眼花繚亂，那么如何更快的定位、如何更高效的編寫樣式呢？CSS的書寫被很多人所忽略。關(guān)于書寫風(fēng)格，翻看了一些知名網(wǎng)站的作品，發(fā)現(xiàn)橫向連排幾乎成為各大產(chǎn)品項目的主流，然而，每個人對于CSS的寫法各異，這就導(dǎo)致我們工作效率的降低。為了更好的協(xié)同工作，保持團(tuán)隊內(nèi)CSS書寫的一致性，幾經(jīng)波折后達(dá)成共識，具體書寫方法如下：CSS屬性橫排書寫，選擇符縱排書寫，每個”,”(逗號)后必須換行;
重構(gòu)組代碼書寫規(guī)范示例：（其中數(shù)字只用做示范，實際應(yīng)用中不建議用數(shù)字命名。）
.class_name_1 .class_name_1_1,
.class_name_2 .class_name_2_1 .class_name_2_1_1,
.class_name_3{style1:value; style2:value; styel3:value; }
有人說，好代碼就是用記事本打開也是藝術(shù)品，而樣式文件本身就是設(shè)計作品。目前并沒有一個權(quán)威來界定這種規(guī)范，我們只能對兩種寫法做個簡單的總結(jié)。
就樣式文件本身對比：
縱向書寫特點：
- 每個CSS屬性獨立一行，一般不會出現(xiàn)換行或橫向滾動條。
- 可以通過firebug等工具查找到模塊，在DW中ctrl+g行定位，修改方便。
- 屬性段落間有縮進(jìn)，保證了代碼的整潔，層次清楚，符合編程語言代碼規(guī)范，修改更加直觀。
存在的問題：代碼冗余（如空格符、tab符、換行符）；文件大小增加；容易出現(xiàn)縱向滾動條。
出處：騰訊Webteam
責(zé)任編輯：bluehearts
上一頁 下一頁 談CSS書寫風(fēng)格 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 談CSS書寫風(fēng)格 [1]
第 2 頁 
