UI Team前端規(guī)范

1、新蛋UI Team 前端規(guī)范版本號(hào) V1.0執(zhí)行日期：2011-07-02一、文件組織|-themes|-default |-css |-ele_css |-js |-Nest |-img |-temp 文件夾結(jié)構(gòu)二、文件夾管理規(guī)范 文件夾結(jié)構(gòu)1、CSS文件夾下放的是全局global.css和各個(gè)頁面的CSS文件，注意相同類型的頁面使用同一個(gè)CSS文件。 比如一二三級(jí)類頁面，都使用category.css，賬戶中心的所有頁面都引用account.css等；2、ele_css是公用模塊的CSS，需要用到哪個(gè)模塊則在相應(yīng)頁面的CSS文件中通過import引入（打包發(fā)布時(shí)再移除import）3、具體

2、頁面調(diào)用的JS文件，文件名以“pg_”開頭，前端具體功能性組件以“ui.”開頭，前端通用的方法定義在UI命名空間下；4、圖片文件，每類頁面用到的圖標(biāo)都整合在該系列頁面的sprite上，sprite圖片以“*_sprite.png”形式命名，整站通用的 icon命名為“icon_sprite.png”,整站通用的非圖標(biāo)類圖片命名為“global_sprite.png”,temp文件夾里存放的是一些上線 后需要?jiǎng)h除的圖片。三、頁面結(jié)構(gòu) 頁面主體結(jié)構(gòu)用id命名，其他元素用class命名： 四、代碼的書寫注意編寫html時(shí)，思想里需要有一個(gè)分塊的概念，在寫之前要已經(jīng)把內(nèi)容分成了一個(gè)個(gè)單獨(dú)的小塊，htm

3、l代碼編寫要考慮標(biāo)簽的語義化，seo以及頁面的性能，要有模塊化的概念，要考慮通用性，要注意給程序嵌套頁面提供方便，能盡量少用層級(jí)結(jié)構(gòu)時(shí)不要增加不必要的標(biāo)簽（但對(duì)于區(qū)分模塊而使用的外層標(biāo)簽不能?。?，要注意代碼的排版，js文件注意放在頁面的底部。 分塊的概念：在寫html之前，自己頭腦里就應(yīng)該把它劃分成了兩個(gè)區(qū)塊：標(biāo)題塊跟列表塊（圖一）四、代碼的書寫 標(biāo)簽的語義化：語義化，就是讓寫出來的標(biāo)簽要符合他本身的語義，如H系列標(biāo)簽表示標(biāo)題，P標(biāo)簽表示段落，OL標(biāo)簽表示有序列表等等。標(biāo)簽的語義化讓html有了感情色彩，有了生命力，也給后續(xù)的開發(fā)和維護(hù)帶來方便。上面的設(shè)計(jì)稿中，標(biāo)題塊可以用H標(biāo)簽去寫，列表塊可

4、以用OL列表去寫。 模塊的通用性：考慮到模塊的通用性，應(yīng)該從兩方面去注意問題：HTML代碼的書寫 和 CSS的組織。Html代碼的書寫四、代碼的書寫 Html代碼的書寫用戶體驗(yàn)最好的電子商務(wù)網(wǎng)站？ 新蛋網(wǎng) 239票 1 就例如上面的設(shè)計(jì)圖，這種模塊通用性很強(qiáng)，可能會(huì)在很多頁面上都需要顯示他。拿通用性模塊使用要有“拎”的感覺，就是抓住一個(gè)點(diǎn)就能把整塊提起，模塊的代碼不能太松散。例如上面的設(shè)計(jì)圖不能只寫成：四、代碼的書寫 Html代碼的書寫用戶體驗(yàn)最好的電子商務(wù)網(wǎng)站？ 新蛋網(wǎng) 239票 1 而應(yīng)在外面嵌套一個(gè)標(biāo)識(shí)層：這樣人家一看到quitionnaire這個(gè)層就知道這里開始是問卷調(diào)查模塊，要cop

5、y到其他頁面使用的話直接copy這個(gè)層的內(nèi)容就行了，而不需要人家去查找從哪到哪是這個(gè)模塊的代碼。四、代碼的書寫 CSS的組織.questionnaire.questionnaire h3.questionnaire li.questionnaire a.questionnaire .votes.questionnaire s一個(gè)模塊的樣式應(yīng)該以這個(gè)模塊名開頭去定義。例如上面的模塊樣式可以這樣寫：這樣別人一看就知道這是哪個(gè)模塊的CSS，要有其他項(xiàng)目也用這模塊，就很容易的可以復(fù)制過去使用，而且這樣也便于維護(hù)。四、代碼的書寫 CSS的組織.questionnaire a 另外一個(gè)css書寫要注意的問

6、題是，層級(jí)結(jié)構(gòu)不要寫太多，如:就不要寫成.questionnaire li a 后面這種寫法不僅不便于閱讀、增加了文件大小，而且還影響頁面的渲染速度。對(duì)于通用性CSS的書寫，還有一個(gè)要注意的問題是，就例如上面的設(shè)計(jì)稿，可能這個(gè)頁面下需要這種風(fēng)格的色彩搭配，到另外一個(gè)頁面下可能需要換一套顏色，這個(gè)時(shí)候不能直接copy這模塊的整段CSS然后換個(gè)名稱一個(gè)個(gè)改掉里面的顏色值。對(duì)這問題的原則是，保證通用CSS定義不變的情況下，特殊頁面要特殊處理。上面的這個(gè)通用模塊，可能在另外一個(gè)頁面里他是放在了“.sidebar”這個(gè)層里面的，那我們就可以在這個(gè)頁面的CSS文件中，單獨(dú)特殊處理要改變的顏色，這樣定義：.

7、sidebar .questionnaire h3background-color:#0f0;.sidebar .questionnaire liborder-color:#555;* 重復(fù)的內(nèi)容不用重復(fù)定義，只寫要更改的那部分。五、SEO優(yōu)化 SEOSEO優(yōu)化雖然技術(shù)這塊能貢獻(xiàn)的力量很小，但要做好SEO，這塊的工作也絕不能忽視。我們要盡量做到標(biāo)簽的語義化，一個(gè)頁面只使用一個(gè)h1標(biāo)簽，重要內(nèi)容在結(jié)構(gòu)上要放在前面。另外注意在編寫html時(shí)要注意文檔大綱。一個(gè)好的頁面也是一篇好的文章，通過文檔大綱可以清楚的看到這個(gè)頁面的主要內(nèi)容。六、給程序嵌套頁面提供方便 規(guī)范在寫html時(shí)，要考慮到我們的htm

8、l代碼程序能不能用，就比如一個(gè)列表展示的內(nèi)容，程序可能是需要通過循環(huán)去輸出數(shù)據(jù)，那我們html代碼就要做一個(gè)循環(huán)的結(jié)構(gòu)，不能寫成這條內(nèi)容是這種結(jié)構(gòu)，下一條內(nèi)容又是另一種結(jié)構(gòu)，這樣會(huì)導(dǎo)致程序嵌套頁面很困難，甚至我們提供的html代碼他們用不了。另外再如空格的問題，我們有些結(jié)構(gòu)里可能標(biāo)簽跟標(biāo)簽之間的空格是不能少的，我們要是直接按個(gè)空格鍵來達(dá)到空格效果的話，到程序那邊嵌套頁面時(shí)，他們很有可能就會(huì)忽略這個(gè)空格的存在，所以，對(duì)于需要空格的地方，要在html代碼里用“ ”來標(biāo)識(shí)。頁面的注釋不需要寫太多，注釋在ie6下經(jīng)常會(huì)引起莫名奇妙的bug，建議對(duì)于會(huì)引起程序員誤解的地方才使用注釋，如：其中“

9、menu_index”是只有在首頁才需要輸出的，那么這個(gè)時(shí)候就需要注釋標(biāo)記告訴程序。七、代碼的版式及其他：不管是HTML、CSS還是JS，代碼書寫時(shí)要注意排版整齊，使用Tab 鍵縮進(jìn)；CSS放在同一行書寫時(shí)，屬性跟熟悉之間用空格鍵隔開；CSS的命名要有意義，不要使用沒有意義的命名；標(biāo)簽名，屬性名全部小寫，屬性需加引號(hào)，單標(biāo)簽需閉合；七、代碼的版式及其他：常用結(jié)構(gòu)名稱頭：header尾：footer導(dǎo)航：nav側(cè)欄：sidebar/aside分欄：column頁面包裹層：wrapper左右中：left right center登錄條：loginbar標(biāo)志：logo廣告：banner頁面主體：main熱點(diǎn)：hot內(nèi)容：main/content下載：download子導(dǎo)航：subnav菜單：menu子菜單：submenu搜索：search友情鏈接：friendlink頂部：topba