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