前端开发现在已经从传统的后端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

vue/react/angular开发的css架构思考的更多相关文章

  1. 手把手教你使用Vue/React/Angular三大框架开发Pagination分页组件

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  2. 前端开发组件化设计vue,react,angular原则漫谈

    前端开发组件化设计vue,react,angular原则漫谈 https://www.toutiao.com/a6346443500179505410/?tt_from=weixin&utm_ ...

  3. 三种Web前端框架比较与介绍--Vue, react, angular

    一.Angular 1.MVVM(Model)(View)(View-model): 2.模块化(Module)控制器(Contoller)依赖注入: 3.双向数据绑定:界面的操作能实时反映到数据,数 ...

  4. Angular Vue React 框架中的 CSS

    框架中的 CSS Angular Vue React 三大框架 Angular Vue 内置样式集成 React 一些业界实践 Angular Angular . js (1.x):没有样式集成能力 ...

  5. vue,react,angular三大web前端流行框架简单对比

    常用的到的网站 vue学习库: https://github.com/vuejs/awesome-vue#carousel (json数据的格式化,提高本地测试的效率) json在线编辑: http: ...

  6. vue react angular对比

    1.数据绑定 1)vue 把一个普通对象传给Vued的data选项,Vue会遍历此对象的所有属性,并使用Object.defineProperty将这些属性全部转为getter/setter.Obje ...

  7. vue,react,angular本地配置nginx 环境单页面应用

    一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...

  8. Web前端/全栈核心(html5/css3/js/vue/react/angular/es6/node)观看笔记

    a标签中的超链接,需要加   http://    否则会出现页面找不到. iframe中添加a标签,a标签中的target属性可以控制即将打开的页面,在那个位置显示. _blank 在新窗口中打开被 ...

  9. 前端三大框架（Angular Vue React）

    前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...

随机推荐

  1. Nginx Rewrite相关功能-rewrite指令

    Nginx Rewrite相关功能-rewrite指令 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  2. node 单线程异步非阻塞

    链接:http://www.runoob.com/nodejs/nodejs-callback.html 首先什么是单线程异步非阻塞? 单线程的意思整个程序从头到尾但是运用一个线程,程序是从上往下执行 ...

  3. phpcms切换到php7.2后无法修改文章提示Uncaught Error: [] operator not supported for strings

    前段时间将客户的phpcms站点升级到php7.2,相对比较顺利,但是今天他反应文章无法修改了,提示Uncaught Error: [] operator not supported for stri ...

  4. MySQL 学习网站

    [大型网站] CSDN论坛MySQL版块 https://bbs.csdn.net/forums/MySQL MySlide搜索MySQL https://myslide.cn/slides/1758 ...

  5. 洛谷P3835 【模板】可持久化平衡树（FHQ Treap）

    题面 传送门 题解 可持久化一下就好了,具体可以看代码 这里有一个小\(trick\)就是我们原本在\(merge\)的时候也要新建节点的,但是我们\(merge\)之前一般已经\(split\)过了 ...

  6. 什么是ES5?js中的'use strict'是什么？目的是什么？

    什么是ES5? ECMA Script5:ECMA(欧洲计算机制造联合会)的第五次改版,2009年. js中的'use strict'是什么? js的严格模式 目的: ①添加更多报错的场合,消除代码的 ...

  7. 【JZOJ100209】【20190705】狂妄之人

    题目 \(S\)串长为\(n\),字符集大小为\(k\) 一次操作为:取走\(S\)的任意一个字符或将\(S\)重排为一个没有出现过的字符\(S'\) 询问有多少个\(S\)使得后手必胜,答案对\(P ...

  8. vb.net 对字符串中的括号匹配进行判断，容许嵌套

    '   括号检查 '     括号共有四种:  1(英文圆括号),2(中文圆括号),3[方括号],4{花括号} '      要左右匹配(可以嵌套) Private Shared Function i ...

  9. varnish搭建cdn网络-------3.0.5版本

    CDN分发网络CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在 ...

  10. Ubuntu 16.04安装ANSYS 2019 R1

    参考:<ANSYS15.0 for Linux下载及安装教程> 参考链接: https://wenku.baidu.com/view/92bdf21b312b3169a451a4b5.ht ...