總結一下前端方面，自己的一些體會，亂七八糟的整理了一下，暫時就想到了這些，以后會持續更新。
構建工具一定要用，gulp等。使用requireJS、browserify等 js模塊管理，bower管理三方庫
css：
結構：
- 使用less，文件結構參考bootstrap less源文件
- 盡量多分less文件，按照用途、分類等命名，盡量讓一個less文件的代碼少一點，文件多一點，這樣后期好維護和查詢
三方庫：
- 使用bower下載三方庫，如果有需要修改調整三方庫的類，引入三方庫的less源文件，覆蓋一些三方庫的類
（不要修改源文件，只是利用優先級方式自己修改一些類）
如下，去boostrap入口文件自己添加一些less：
@import "../../bower/bootstrap/less/mixins.less";
@import "../../bower/bootstrap/less/variables.less";
@import "variables.less";//my setting
@import "../../bower/bootstrap/less/normalize.less";
@import "../../bower/bootstrap/less/utilities.less";
@import "../../bower/bootstrap/less/type.less";
@import "../../bower/bootstrap/less/grid.less";
@import "../../bower/bootstrap/less/scaffolding.less";
@import "../../bower/bootstrap/less/buttons.less";
@import "../../bower/bootstrap/less/button-groups.less";
@import "../../bower/bootstrap/less/forms.less";
//my @import "buttons.less"; @import "form.less"; @import "scaffolding.less";
命名：
- 命名用中杠隔開，例如：.layout-text。
- 同時，我覺得自定義class必須在前面加前綴，比如項目叫 sun light，那前綴就是.sl，實際就是.sl-layout-text。或者也可以是公司名的英文開頭、也或者自己的，具體根據項目情況。
這樣有個好處，因為一般都會用到三方的css庫，當自定義的類和三方類混在html中的時候，一下就能看出哪個是自己定義的，非常方便維護和理清頁面。
- 根據不同情況，也可以不加上自定義前綴，比如（只需要在最上層加上一個前綴）：
<ul class="xx-user-comments">
<li>
<div class="con">
<img class="head">
<p></p>
</div>
</li>
</ul>
.xx-user-comments{//xx代表需要的前綴 li{ padding-top: 15px; .con{ position: relative; padding-left: 45px; .head{ position: absolute; left: 0; top: 0; } p{ font-size: 14px; } } } }
- 圖片命名也建議用中杠隔開
代碼：
- 嚴謹，布局時盡量寫的完善，比如該寫寬高的地方一定要寫，否則會出現一些想不到的錯亂。
- 充分理解行內元素和塊級元素，盡量少用並合理利用float。
- ID class style !important等選擇器，理解他們的優先級
- 能抽離為class的通用屬性盡量抽離
- 能寫變量的地方盡量寫變量，可以幫助少寫代碼和后期維護，如下（如果路徑變動，只需要改變量，用編輯器批量修改也可以，只是下面這樣更優雅一點）：
//##IMG @img-path: '../img'; //img button @weixin: '@{img-path}/weixin@2x.png'; @weixin-hover: '@{img-path}/weixin-hover@2x.png'; @qq: '@{img-path}/qq@2x.png'; @qq-hover: '@{img-path}/qq-hover@2x.png'; @weibo: '@{img-path}/weibo@2x.png'; @weibo-hover: '@{img-path}/weibo-hover@2x.png';
- 一般頁面的色系是設計師確定了的，把所有要用到的顏色寫成變量，統一管理
- 采用以下盒子模式，元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
- 注意一些冷門的css3屬性，可以解決一些麻煩的問題，比如之前遇到一個問題，用user-select就解決了。《移動端 ios 長按復制兼容方案》
- 推薦使用webfont
- 試試rem
js：
- 根據頁面，模塊划分目錄結構
- jq的變量用$符號開頭
- 使用全局js變量加上window，比如: window.map,目的是后期維護，一眼就能知道這個是全局變量，節約一些看代碼的時間
- 注意異步和同步對邏輯造成的影響
- 用變量來存儲JQ或原生選擇器選擇的要多次調用的dom，優化性能
- 學會封裝一些工具類，減少開發成本
- 搞清作用域的變化情況
- 移動端也推薦用JQ，不用zepto
- 使用requireJS、browserify等模塊管理工具來管理js
- 移動端記得使用fastclick
html：
- 抽離公用模塊，footer、header、modal等
- 小心代碼換行造成的文字空格問題
- 感嘆號等符號盡量用英文符號，中文符號間距較大，導致一些居中效果看起來沒居中
- 使用模板繼承，好處大大的
- 別再用超級長的document申明了，看到就受不了，直接<!doctype html>
- dom的display：none的時候，去操作它，會容易有一些問題出現
思想：
- 不要太追求技術的流行程度，不要跟風，多做對比，使用適合項目的技術
- 頁面中別用太多動效，動的多了反而頭暈，不要為了技術而在項目中炫技
- 別敷衍了事，有問題別覺得自己解決不了，勇於承擔，一點點發掘，多注意細節，總會解決的
- 遇到需求先找網上有沒有合適的三方插件，有就用，效率優先；沒有就自己寫，其實非常有趣味
- 思考清楚再下手，邊試邊寫，效率低，bug多
- 多看文檔，多補知識，不要依賴問人，費時間且沒有成長
- 不推薦買一大堆書，然后都沒看完
- 推薦寫博客，比網上或者當面技術交流有效果
- 多了解非技術的知識，個人成長的瓶頸往往不是技術
- 融入團隊，站在什么層面想問題，最后就在什么層面做事情
- 最后一點：遇到喜歡的妹紙不要慫
歡迎留言補充，關於一些細節的注意點、怪異情況等等
以上只是一些點，每個點都可以延伸很多知識。