如何优化一个已经开发一年的外包项目——CSS篇

拥抱AI和副业的前端鸿蒙测试开发工程师
1,804 阅读8分钟

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

项目应用技术背景

  • nuxtJs
  • Vue2.0
  • ElementUI
  • CSS
  • JS

项目存在问题点

  1. 项目开发人员大批更迭，导致各个页面负责人经常轮换，开发人员对业务理解不深，对项目中存在的共通更是了解不够
  2. 项目开发人员技术水平良莠不齐，且没有专人review，代码质量堪忧
  3. 项目模块较多，且为国外项目，开发迭代需要通过翻译软件翻译需求设计文档，影响开发效率且容易出现误解
  4. 项目页面较多，开发人员无法了解项目整体业务，只负责各自页面开发维护，应变能力不强
  5. 项目初期架构水平一般，没有形成一个良好的闭环开发模式
  6. 项目设计很差，过多的接口，过多的DTO，以及过多的数据结构需要前端来处理，造成代码过多的冗余
  7. 项目共通组件和函数比较匮乏，且质量比较一般，代码规范没有太明确的定式
  8. 项目没有着重考虑性能问题
  9. ......（省略过多的吐槽，日子得过，代码得写，项目得接，只是不想成为真正的码农，避免过多的体力劳动，那就得进行变革，Just Do It!）

解决方案

首先，项目工期已经过了一半，大多数页面已经开发完毕，所以想要从头大改是不可能的事儿了，考虑到时间和成本的问题，只能徐徐图之，先解决项目痛点，主要提升代码质量和开发效率。

先从项目应用技术上来看，nuxtJS、vue2.0、ElementUI这三个框架技术不能动，也动不了，最多也就是在原来的基础上小幅度优化一下，先略过这部分，那就只能动CSS和JS部分了。

CSS优化

纵观整个项目，css主要组成部分就是common.css、default.css以及写在每个组件页面里面的style scoped里面的css，乍一看可能没有问题，但scoped这个字眼就会引出很多问题了，随便截取一个组件中style scoped的图：

code.png 上图中出现最多的元素是什么，是::v-deep，说实话，这个属性我以前基本没有用过。

众所周知，scoped是vue为了避免css样式之间的相互污染而引入的概念，但是它的弊端也很明显，当我们引入第三方组件库时，如上图所示修改ElementUI的组件样式时必须使用样式穿透::v-deep（当然，样式穿透的方法不止这一种），这样看起来虽然没有问题，但是写法优雅吗？这么大批量的使用样式穿透，维护共通样式怎么维护？而且本身样式穿透就有违scoped的属性定义，所以这里不建议大规模使用scoped (^▽^)，没错，憎乌及屋，因为现如今有更好的方案来处理这些问题啊！

Sass、Less、Stylus——CSS 预处理器

三者本质上没有什么区别，都是为了赋予CSS逻辑处理能力，增强了css代码的复用性，还有层级、变量、循环、函数等，具有很方便的UI组件模块化开发能力，可以极大的提高工作效率。

回到代码，如果使用了CSS预处理器我们的CSS代码会是什么样子呢？上图，综合原图比较一下：

code.png 上图即是使用Less嵌套语法后的css代码，和之前比较一下，层级嵌套关系是不是清晰了很多，避免重复写父类名，且即使不写scoped也能保证样式不会互相污染，因为全都包裹在一个父类里面，只要保证父类不重复就不会相互影响，这就是CSS 预处理器的功能之一 —— 嵌套，也是我最想应用到项目中的功能，同时也是最容易的优化方案。

优化方案具体如下：

  1. 项目中引入Less npm install -g less
  2. 项目中各模块页面vue文件修改style lang="less"，去掉scoped
  3. 将各个vue文件中style部分进行嵌套构造，且统一包裹在一个父类中，父类名为当前页面名，避免项目内父类名重复
  4. 修改common.css和defaul.css为less文件，同样进行局部的嵌套处理，公共样式进行审查筛选，去除非必要的全局样式，定义颜色变量和常用的样式变量
  5. 增加全局less文件resetElementUI.less，此文件内整合所有覆盖ElementUI原生的样式，抽取各个页面组件的覆盖样式到此文件并做好样式隔离，最终达到除了这个文件之外其他页面或组件内部没有覆盖ElementUI样式的css，当然，这个过程不能一蹴而就，因为目前项目中覆盖ElementUI样式的地方很多，还需徐徐图之

完成了以上5步，其实就可以让项目内css的管理容易很多了，而且能够在整合过程中发现冗余的代码。

当然，完成这些还是不够的，先重点来看一下第5条，项目主要使用ElementUI并覆盖其样式，由于设计原因，样式上和ElementUI出入较大，所以覆盖点也比较多，但是发现，有很多覆盖样式其实是没有必要的，完全可以借助定义新类或者ElementUI组件回调的方式赋予组件想要的样式，所以第5条的作用是整合覆盖样式，接下来就是拆分，分门别类，找出经常会覆盖的样式到resetElementUI.less里面，进一步精简覆盖样式，便于以后的样式维护。

再说一说项目的适配性，目前项目为PC端项目，对于适配貌似客户没有明确规定，按照设计图来就行，那么问题来了，究竟怎么还原设计图设计进行页面样式编写？目前项目给我的答案是百分比布局，也不是真正的百分比布局，只是所有宽度都用百分比形式编写，乍一看没有问题啊！但当你把页面宽度缩小的时候，随便找个例子，如图分别为正常屏宽和缩小后的屏宽显示：

image.png

image.png

我们可以看到哪些问题呢？

  1. label文字换行
  2. input输入框宽度缩小
  3. 年月日级联下拉框显示不全文字

造成这些现象的原因只有一个，那就是滥用百分比，首先，百分比布局没有问题，但是百分比布局的定义中有一条，就是配合使用最大宽度或最小宽度。

在标准的项目中，类似于表单组件，应该有一个明确的样式定义，如输入框有大中小三个宽度定义，或者根据屏幕宽度媒体查询自动适配，而不是现在项目中实现的所有组件控件都根据design来计算百分比。

我的优化方案如下：

  1. 定义好项目中常用控件的宽度，明确各场景宽度规则，形成文档，解决项目中样式宽度不统一的问题
  2. 开发思想，首先明确网页最小显示宽度，页面父容器设置min-width，视窗缩小到最小宽度出现滚动条；将一个页面根据布局拆分成若干个模块，根据design按百分比进行设置宽度，同时设置最大最小宽度，保证视窗宽度在最小值时不会样式错乱；模块内按照栅格布局的方式或者flex布局进行排列，始终保证控件显示正常，酌情选择使用百分比或者px等单位；
  3. 针对于项目中表单比较多，目前使用ElementUI的表单组件，但是发现项目中很多表单虽然用的是ElementUI的表单组件，但是没有吃透其所定义的一些属性，通俗点说就是，有现成的都不用，这样就导致各个页面的表单构建方法差异很大，很难维护，所以需要提出规范，将表单标准化，后续我的想法是提出共通表单组件，通过JSON就能构建表单（待开发）
小结

CSS既简单也困难，很多开发人员不重视CSS的开发，就像以前后端看不起前端（切图仔）一样，但是你去看看学习CSS的书有多厚，CSS能做到的效果有多炫。作为普通的开发者，我们能用到的CSS属性其实不多，掌握好这些知识点能受用整个职业生涯。

本文内容基于博主实际项目，技术内容比较浅显，主要描述优化思路和实际痛点问题，后续会继续基于项目进行不断优化，关注我的后续文章，持续更新，一定有你想要看到的技术干货哦~

~（￣︶￣）↗点赞

推荐CSS图书：《CSS禅意花园》《CSS揭秘》

avatar
文章
阅读
粉丝