相信各位在开发项目上都没啥问题，但是在项目越做越大时是不是都遇到难以维护的问题，尤其是css这块，或许大家觉得css很简单，其实不然，css是前端的基本功，也是考验一个前端的是否是一个合格的前端。css在一个项目的面子，一定要重视，稍微一不注意就会造成作用域污染，造成后续的项目难以维护下去，修改一处牵动很多，其实这些都是项目底层的搭建问题，本人在一年的时间学了前端的架构、java后台、vue、react整理各种框架和语言后有一些自己的理解，并且感谢我的老板给的一本前端架构方面的书籍，我会持续更新我所掌握的前端架构知识点，希望以下内容能帮助到各位。
本节内容只讲css拆分。
本节推荐大家使用scss。scss预处理器可以让我们直接通过css可以看出整个页面的布局，并且可以很好的让我们封装css，让写css如同写js一样方便，大量的减少代码量，让我们更好的维护项目，下面到我们的重点。
- css拆分-例如使用scss，并且引入element-ui
public.scss：存放整个项目的规范-属性，例如文字大小，间隔，行高，文字颜色，导航高度，底部菜单高度，高度，主题颜色等等，并且使用webpack全局配置到项目中。
app.scss：存放整个项目的全局样式，例如使用public.scss的属性定义的样式、或者封装好的弹性盒子，。在index.scss中引入。
我们可以将以上两文件归类到项目的配置层。
elementComponent.scss: 使用scss的@mixin封装element-ui的原生样式修改为自己的样式。-全局引入
index.scss：全局公共样式，@include使用封装好的elementComponent.scss文件的scss方法，全局定义的css样式，封装页面结构，按钮样式，其他的公共样式。
其他的页面的css一定要分开写，每个页面有属于自己的css。
一个好的开发必须要前后端都要掌握，可以借鉴java的开发方式理解以上方式。
public.scss：类似于java的接口定义规范规范。
app.scss：类似于java的service层。
elementComponent.scss：类似于java的工具类。
index.scss：类似于java的controller层，我们调用时只调用此层。
虽然项目复杂了，但是项目方便维护，每一层都只处理自己的事。
本节只讲css层的拆分，明天继续更新。
网友评论