個人前端開發準則

轉眼入行一年半，在前端這條路上摸爬滾打，學海無涯，生命不息，code不止。回頭看本身今年寫的代碼，依然慘不忍睹，留坑無數。不少道理都是在不停的寫之中才想明白的。只是工做不會給咱們時間回頭去改翔通常的代碼，我能作的，就是在接下來的過程當中再也不去犯一樣的錯誤。但願我寫的這點筆墨能讓剛入行的同窗少走一個彎路。

再次說明，這是個人準則，裏面有精華也有糟粕，若是有熱心人能指點一二，感激之情，不勝言表。

關於圖片

1. 頁面內的大圖，特別是banner圖，登陸頁背景圖等，使用第三方的cdn加速。同時作一遍壓縮，若是壓縮以後還超過200kb，則和設計師溝通是否取消或者更換圖片。

2. 精靈圖必備，各類小圖標，小icon，作到一張圖片裏面去。

3. 儘可能使用icon font代替小圖標，icon font的優勢能夠甩普通的icon圖標幾條街，隨意調整大小，改變顏色，太cool！！

4. 若是項目很大，公司不差錢，最佳方案是把圖片資源放在單獨的服務器上，配置獨立的域名，圖片資源的加載由圖片域名加載，不少大公司的靜態資源都是由獨立的服務器來存放和分發的

我通常和設計師討價還價的底線就是圖片必須加載流暢，若是用戶打開網頁圖片加載半天出不來，就算咱們的圖片作的再漂亮，又有什麼卵用！！

良心資源：阿里巴巴字體圖標庫

關於js

1. 第三方的js庫，必須使用min版。站點內部的lib，每次發佈上線以前必須使用gulp壓縮合並。

2. 移動端使用zepto庫，不容許使用jquery

3. 給js代碼一個全局命名空間，舉個例子，咱們的項目是某個自行車官網，全局命名空間就叫bike，和本項目有關的全部js方法，函數，變量，所有掛在bike的下面

var bike={};
bike.name='cookee';
bike.getOrderDetail=functtion(id){.....}

關於css

1. 提煉項目的公共樣式，按鈕、表單。

2. 命名。面向屬性命名，通用模塊能夠面向模塊命名，好比頭部header，尾部footer等，其餘請儘可能使用面向屬性的命名方式，這樣能夠給css最大程度的複用自由，關於什麼是面向屬性的命名方式，請參考推薦

3. 樣式分離再分離，在css裏面不要使用id屬性，留着id給js使用

4. 減小css的層級嵌套，因爲css的渲染是從右向左的，關於網頁的渲染，這個細提及來又能夠寫一篇文章了。若是你的層級標籤嵌套多層，想一想要浪費多少渲染時間，對於移動端毫秒必爭的加載時間，你還有什麼理由不改進你的代碼

5. 優雅的名字可讓人一目瞭然，放一張前人總結的圖，沒事的時候多看看，潛移默化的記住這些名字
   

精簡高效的CSS命名準則/方法

關於html

1. 精簡dom結構，減小冗餘html

2. 語義化標籤，要學會用

3. 移動端，使用svg繪圖代替canvas繪圖，canvas會有嚴重的鋸齒(若是有同窗有實踐過的解決鋸齒的方案，我願恭聽)