整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
我們使用HTML5， CSS3，甚至Bootstrap設(shè)計(jì)網(wǎng)站的時(shí)候，有些方面是必須考慮的，比如字體大小，標(biāo)題大小，行間距，每行字?jǐn)?shù)，字體，顏色，背景圖片和文字的搭配，圖標(biāo)，留白和布局......所有的這些，都不是隨隨便便的，講究一定的原則。而這些原則通常我們?yōu)閰⒖家恍┚W(wǎng)站。下面就列舉這些網(wǎng)站。
HTML5和CSS3常用參考網(wǎng)站？
瀏覽器渲染符合HTML5標(biāo)準(zhǔn)：http://necolas.github.io/normalize.css/
Google字體：ttps://www.google.com/fonts
柵格：http://www.responsivegridsystem.com/
扁平顏色：http://flatuicolors.com/
選擇顏色值：http://www.0to255.com/
icon圖標(biāo):http://ionicons.com/
css: https://css-tricks.com/
js的CDN:http://www.jsdelivr.com/
一個(gè)CSS屬性在各個(gè)瀏覽器的兼容性: http://caniuse.com/
創(chuàng)建favicon: http://realfavicongenerator.net/
壓縮圖片尺寸：http://optimizilla.com/
CSS文件最小化：www.minifycss.com
JS文件最小化：hTp://www.minifyjavascript.com/
檢測html代碼：http://validator.w3.org/
文/丁向明
做一個(gè)有博客的web前端自媒體人，專注web前端開發(fā)，關(guān)注用戶體驗(yàn)，加我qq/微信交流：6135833
http://dingxiangming.com
端在開發(fā)過程中，是需要一些規(guī)范的，有了規(guī)范文檔能夠使我們的開發(fā)流程更加規(guī)范化;提高團(tuán)隊(duì)的協(xié)作能力、代碼的復(fù)用率;寫出質(zhì)量更高的代碼;同時(shí)也可以方便我們后期的維護(hù)。
文件規(guī)范：
根據(jù)項(xiàng)目名稱創(chuàng)建項(xiàng)目文件夾，將css文件夾、images文件夾、js文件夾、psd文件夾、*.html文件放在工程目錄中。
HTML文件以英文命名，首頁名稱必須為index.html作為入口文件。
css文件以英文命名，后綴為.css。通用的css文件包括base.css/reset.css和public.css，里面包含css reset、公用的css間距、css文字樣式等，首頁為index.css，其他頁面依據(jù)實(shí)際的模塊進(jìn)行命名。
JavaScript文件以英文命名，后綴為.js。通用的js文件common.js和base.js，其他頁面依據(jù)實(shí)際的模塊進(jìn)行命名。
圖片文件命名盡量與模塊樣式名稱保持關(guān)聯(lián)，常用圖片格式j(luò)pg、gif、png等
HTML規(guī)范：
文檔類型聲明統(tǒng)一為html5的文檔聲明;編碼方式統(tǒng)一為utf-8 。
書寫時(shí)根據(jù)頁面結(jié)構(gòu)，利用IDE實(shí)現(xiàn)層次分明的縮進(jìn);所有代碼需要遵循HTML標(biāo)準(zhǔn)，建議書寫標(biāo)簽名、屬性名時(shí)使用小寫字母;屬性值必須用雙引號包圍;并考慮向后擴(kuò)展性。
使用語義化標(biāo)簽，便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼，便于瀏覽器、搜索引擎解析，便于團(tuán)隊(duì)開發(fā)和維護(hù)，有利于SEO。如：標(biāo)題用h1-h6，段落用p標(biāo)簽。特殊符號盡可能使用代碼來替代。
合理規(guī)劃元素嵌套層級，不合理的嵌套會影響頁面性能
HTML中圖片的使用：
1 )img標(biāo)簽中添加alt=”替換文本”，以便圖片丟失時(shí)，用戶可以根據(jù)替換文本了解頁面內(nèi)容
2)運(yùn)用css sprites技術(shù)，集中小的背景圖或圖標(biāo), 減小頁面http請求，sprite按模塊制作，方便后期修改或多人協(xié)作開發(fā)
CSS規(guī)范：
統(tǒng)一編碼規(guī)則為utf-8。
書寫代碼前需要做如下考慮：
1)確定版心，如果超過1200需要與設(shè)計(jì)師溝通確認(rèn);
2)規(guī)劃樣式，提高樣式的重復(fù)使用率;
3)樣式重置;
4)提前溝通頁面中模棱兩可的需求和交互，方便后續(xù)布局;
5)布局時(shí)考慮后續(xù)交互效果處理的便利性，必要時(shí)預(yù)留出后續(xù)交互中會用到的樣式。
書寫代碼時(shí)，添加注釋，保持代碼縮進(jìn)格式;當(dāng)屬性值為0時(shí)，可以省略后面的單位;建議每個(gè)語句結(jié)束后添加分號;注意兼容問題。
選擇器命名要遵循命名規(guī)范：
1) 由字母開頭，小寫英文、數(shù)字和 _ 來組合命名 或者 首字母大寫，駝峰式命名
2) 命名要語義化,，簡明化。盡量做到見名知意
css屬性書寫順序。建議遵循: 布局定位屬性–>自身屬性–>文本屬性–>其他屬性. 也可根據(jù)自身習(xí)慣書寫, 但盡量保證同類屬性寫在一起
1) 布局定位屬性：display 、float、position以及相應(yīng)的 top、right、bottom、left屬性等
2) 自身屬性：width、height、background、padding、border、margin等
3) 文本屬性：color、font、text-decoration、text-align、vertical-align等
JavaScript規(guī)范：
文件編碼統(tǒng)一為UTF-8。
書寫過程中每行代碼結(jié)束需要添加分號;變量名命名，需要符合命名規(guī)范，建議使用駝峰式命名方式;書寫時(shí)需要在文件中添加適當(dāng)注釋。
所有功能均根據(jù)項(xiàng)目實(shí)際需求原生開發(fā)，避免冗余;如果需要引入第三方庫，需要與團(tuán)隊(duì)其他開發(fā)人員溝通，討論決定。
后期優(yōu)化過程中，非注釋類中文字符必須轉(zhuǎn)換成Unicode編碼使用，避免出現(xiàn)亂碼。
注意事項(xiàng)：
頁面中的文本內(nèi)容。一般能用文字的都用文字保證靜態(tài)頁面的可編輯性，專題中的特殊字體一般要切圖，但具體情況與需求溝通。
PC端頁面需要兼容到IE8以下時(shí)，布局中如果用到HTML5標(biāo)簽，注意處理兼容或避免使用。
頁面布局時(shí)能用正常文檔流布局的不使用定位布局;盡可能不使用表格布局，但頁面設(shè)計(jì)中以表格形式展示的內(nèi)容模塊也要盡量使用表格布局
頁面中添加鏈接的部分，通常頁面中需要添加鏈接的部分，PC端要設(shè)置在新窗口打開屬性target=”_blank”
體、顏色、間距、尺寸如果把握？
一般專業(yè)的設(shè)計(jì)師做圖的時(shí)候會非常注意這些，他們會有自己的一套設(shè)計(jì)風(fēng)格，盡管是在單個(gè)頁面下，每個(gè)地方的字體、顏色、間距、尺寸都不是隨意設(shè)定的，這些在你開發(fā)的時(shí)候應(yīng)該能感受的到，這時(shí)要想高度還原其實(shí)并不是難事。
如果你遇到一個(gè)不怎樣的設(shè)計(jì)師，那么最好的辦法就是早點(diǎn)和她溝通，因?yàn)樗齻儾欢夹g(shù)，最終做的圖可能不怎么規(guī)范，可能會導(dǎo)致切圖不好切（無論是你切還是她切），導(dǎo)出2倍圖發(fā)現(xiàn)有問題（可能會有毛邊或者全部給的都是錯(cuò)圖），整體風(fēng)格不統(tǒng)一（包括顏色、間距、尺寸），這些都會對你的開發(fā)帶來很大的困擾。
瀏覽器兼容、如何兼顧低版本瀏覽器但是不丟失過多效果：
不知道你所說的不丟失過多效果是指什么，如果是想在一些過時(shí)瀏覽器下顯示現(xiàn)代瀏覽器的一些圓角，CSS3動(dòng)畫之類的，那么真的完全沒有必要，但要保證基本的頁面布局不要亂套除了IE8以下的應(yīng)該不是問題。
js css img 的框架結(jié)構(gòu)：
這個(gè)你應(yīng)該指的是開發(fā)的時(shí)候吧，其實(shí)這個(gè)和團(tuán)隊(duì)有很大的關(guān)系，只要共同約束好就好了，如果是你一個(gè)人開發(fā)的話最好保證每個(gè)項(xiàng)目都是一樣的結(jié)構(gòu)，不要這個(gè)項(xiàng)目的結(jié)構(gòu)是（js,css,img），另外一個(gè)又是（scripts,styles,images）。
普通Web開發(fā)的話可以參考： h5bp/html5-boilerplate · GitHub yeoman/generator-webapp · GitHub yeoman/generator-gulp-webapp · GitHub
js css命名如何規(guī)范統(tǒng)一：
總的原則是：樣式和行為的命名要區(qū)分開來，具體還是要團(tuán)隊(duì)制定一個(gè)規(guī)范。 給兩個(gè)參考： CSS Guidelines (2.1.3) airbnb/javascript · GitHub
今天就先分享到這里了，有不明白的地方可以私信給我留言。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
