前言

最近在完善之前的项目，看到之前写的七八个!important是真的烦，于是我个人就一直在想相对于Vue的scope来完美解决CSS的污染问题，为嘛React中一直没有一种可以一统天下的方案呢？FB官方是推荐使用的是JSS的解决方案，并且也在进行相关方案的研究，相关的解决方案有很多，这里不一一介绍，主要使用的是zeit出品的styled-jsx来解决。

问题

首先看一下之前结构存在的一些问题。

首先是引入问题，在首页渲染的博客页面，进入文章详情页时，如果不在首页中引入详情页的样式，第一次详情页样式是不会默认刷新的。这个问题出现的原因大概是和next.js不存在param动态路由有关。

第二个问题就是刚刚说的，React相对于Vue最大的问题，就是CSS的污染问题，没有办法像Vue中使用scope去果断的解决组件样式与全局样式的不同。

第三个问题是编译打包时，因为直接修改到antd的样式，导致打包得到的样式和开发环境下样式并不统一的问题，这个问题并不是说非要JSS才能解决，只是在这个过程中进行了一些修改使得样式布局更加科学。

插件

插件的使用有些让人失望，关于styled-jsx的插件，我按照使用最多的两个，一个是高亮，一个是补全，但是配合起来却有报错：

[Error - 9:29:47 PM] (node:14156)
 UnhandledPromiseRejectionWarning: 
 TypeError: Cannot read property 'kind' of undefined at isStyledJsxTag 
(c:\Users\Yoga\.vscode\extensions\andrewrazumovsky.
vscode-styled-jsx-languageserver-1.0.1\server\out\styled-jsx-utils.js:48:31) at findStyledJsxTaggedTemplate
...

查了一番后，返现issue区好多关于这个问题的反馈，按照解答都试了一下，结果还是没啥用。

就当放弃补全，多记记API吧

遇到的困难

整个重构过程还是遇到了些麻烦，首先是之前就存在的使用很多!important，所以这些肯定是要消灭掉的，接着是在使用antd时更改内置的一些样式。

关于iconfont，添加样式时或者要使用div包裹起来，或者要在iconfont上插入样式，总之直接写入jss是不行的。

还有一部分就是因为为了略去分页功能，在文章列表模块使用的是antd的样式，一方面在响应式方面不好入手，另一方面对于一些逻辑的编写也不是那么好用，这一点以后会考虑做相关的改动。

总之，在一些折腾后，得到的效果还是比较满意的，没有出现之前有的很多问题，如编译和开发环境不同等。

style-scss

如果使用这个的话，我们可以使用scss的特性，包裹起来的话看起来还是比较条例的。

当然要求不高的话，css也足够了

关于下一步Life模块

关于下一步的life模块，目前还没有做相关逻辑的设计，初步打算是用卡片的图片和文字来做一个照片墙。

这其中牵扯到图床的东西，之前我在波兰l利用picgo也做了图床，但是回国之后发现因为网络原因效果特别不好，一方面我在尝试把github的图床仓库往gitee上面迁移，另一方面我也在考虑七牛云或者阿里oss的相关问题。

这一点定了之后在考虑life模块的设计。

关于部署

目前可以考虑的是把前台页面放上去，虽然还有一些漏洞和BUG，但是用这几个月的博客数据也大体上可以得到初版的效果了。

关于后端和后台，由于目前还在制作，估计需要明天抽出一天时间做一下守卫之类的后端的东西，在时间很紧张的情况下，总觉得来不及实现所有的逻辑，可能得向后面推推了。

最后

最近有些茫然，一方面像检验一下自己的学习成果到底如何，另一方面又很迫切的想去弥补基础的不足，最后又徘徊在非前端技术的困扰和前端项目细节的完善中，可以说是很累心了，哦对了，还有我的科研。。。

因此博客托更了好几天了，，，