1、页面外部引用样式过多。
譬如关于ul的margin定义,在格式化的css中会声明为0，而在基本样式的css中又可能会声明margin:5px 10px
所以在Yslow中会出现多次定义。
2、组件复用性的考量。
譬如表单定义的css中定义了所有表单的修饰,而假定在注册这个页面中只是需要这个css的百分之三十。那是否应切割出去那不要的百分之七十?
综合以上的二个问题，个人认为解决的方式便是封装，让该有的有，不该有的没有。尽量减少http连接数和css的大小。但如果彻底是这样做的话，css的复用性又会变得很差，后期手工的封装会很痛苦。
3、到底该不该支持em?
可见如要支持em，最大的目的是为了在浏览器中可以根据用户的分辨率大小自由缩放，对于拥有超大显示器的用户与小显示器的用户是非常有用的。可是在采集我们用户的浏览器数据后，发现分辨处于这二端的用户非常少，可想而知，为这部分的用户多花比正常开发一倍以上的时间显然是件不划算的事情，所以当初在开发tbsp的时候，我们团队就决定了不支持em。当然这是个建议，我们也希望能使用em带给用户最好的感受。
最近进行 Element UI 组件封装，在之前的项目中经常用到 el-scrollbar 这个内置组件，这次单独封装时遇到点写法上的小问题，做个记录和分享，希望能帮到相关的开发者。
el-scrollbar 在 Element 组件官方文档中没有，在 node_modules 中可以看到，目录位置 node_modules/element-ui/packages/scrollbar
在 Vue 页面中直接引入 el-scrollbar 标签，定义对应的高度就可以实现 element 官方的滚动条效果
这时候，默认效果的纵向滚动条有了，但是横向会出现浏览器默认的滚动条占位，如下效果
默认的横向滚动条隐藏可以设置 el-scrollbar__wrap 类属性为 overflow-x: hidden 移除， el-scrollbar__wrap 属性可以在浏览其中查看元素看到，在自定义的元素内部，选择元素后在 style 添加 overflow-x: hidden 即可查看移除默认滚动条的效果
在我们的项目组件封装过程中，这个组件的属性设置需要在 <style> 中设置， 注意 默认 css 默认下不能添加 scoped 属性才能正常生效（这里花了我半个小时才弄出来效果）, 写法如下
有的项目里 <style> 标签里如果使用了 scss 并且使用了 scoped 属性的话，需要使用 deep 操作符. 这里可以查看官方说明 https://vue-loader.vuejs.org/zh/guide/scoped-css.html , 如下写法
项目中大部分使用 el-scrollbar 默认使用纵向滚动条效果，在我们项目里的 tag 页签功能区使用了横向滚动条，隐藏了纵向滚动条，由于自定义的需求，在实际使用时需要根据情况设置对应的边距问题，这里调整的时候还需要隐藏原生滚动条，这时候需要耐心一点才能调出想要的页面效果。
主要是因为前几天买了一架大疆无人机（
