vue/react/angular開發的css架構思考

前端開發如今已經從傳統的後端web多頁面開發模式轉向前端單頁SPA開發模式，而vuejs/react/angular則是開發SPA很是優秀的前端框架。組件化開發由react最先提出，vuejs後發優點，將組件化開發貫徹到了極致。雖然spa開發因爲組件式開發帶來的組件重用，可維護，可擴展很是好，可是css樣式的管理一直是一個令前端團隊頭疼的問題，特別是當頁面愈來愈複雜，而且有多個SPA頁面時如何可以讓樣式重用，而且可維護，可擴展並無一個特別有效和被驗證過的普適方案。本文試圖總結一些css模塊化在vuejs開發中的探索。

1. 因爲通常會有一個app組件做爲整個vue應用的container,所以一些全局性的css樣式，最好在這個app組件中定義；

2. 徹底組件化開發，將每個vue組件都做爲獨立可重用單元對待，css也不例外。組件相關的css就在vue的style定義塊中進行定義和開發，而且每一個組件的root元素都給一個class定義，css的定義都應用在這個class裏面，這樣能夠實現樣式的隔離；

3. 在less/sass文件中單獨定義包含color,margin,fontsize等外觀屬性的公共定義文件，好比globalcde.less文件，這個文件能夠經過sass-resources-loader來實如今全部vue組件中可見，而且加以引用。這樣作的好處是全部用戶感知的全局皮膚都在一箇中央控制的文件中定義，一旦須要修改設計，只要在這個文件中修改對應變量。可是須要注意的是，在vue組件設計時，不能隨意hard coded了，而是須要引用這裏定義的color, margin,fontsize等定義！

4. 通常來講，咱們可能會引用相似element-ui,ant-design等組件庫，這時如何既能享受到這些成熟組件帶來的快速開發便利，又能定製這些組件從而適應咱們本身的品牌色系呢？一個可行的思路是經過調用這些組件庫的api，使用上面第3步中定義的全局色系來定製第三方組件庫的theme