一、完成

1.修改任务1-5,11-15。

二、计划

1.继续修改CSS任务

匹配对应任务的布局，颜色等数据；使页面和psd文件基本一致。

三、遇到问题

琐碎问题太多，全部写的话，包括写出具体解决方案，估计可以写一本书了。那么就简列几个，简单描述解决方案思路。具体可以看代码处理和实现效果。

1.原代码布局不合理。

1）命名不够规范。

解决：很多命名都是临时查翻译软件。但仍然不够规范。可以不定时查看编码规范，然后应用实际编码中，直至养成良好习惯。

2）标签不够合理，布局不够合理。

1）比如哪些内容块需要用div，哪些需要用span，哪些需要用标题h1-h6；

2）还要考虑一些其他网站相关编码问题。如网站目录，搜索引擎关键字等。

还没具体学习，可能描述不规范。后期一点点补上。

3）布局方式有时候过于复杂。如：

A、可以用弹性布局直接实现容器内部元素布局的，如果在内部元素用其他方式实现，会过于复杂，代码冗余，调试麻烦，不方便维护等。

B、类似A。有些代码布局可以外层标签直接实现，就直接外层标签实现。

2.预处理语言sass使用不合理。（因为开始技能树之前看过sass资料，所以一开始就用了sass）

1）滥用变量。

如：单位。设置变量$unit:(10/16)*1rem;然后在编码对应单位再比对实际单位，响应式编码。假设p的psd文件的字体大小16px（dpr=1）时，编码如下p{font-size：16*$unit}。

PS:这个问题本身又涉及到很多问题，不展开赘述。

解决方案：直接html{font-size：62.5%；}，即设置1rem=10px（默认1rem=16px，（10/16）*100%*16px）。然后再比对psd文件单位进行设计。

2）简单问题复杂化。

如：任务1等小任务，基本没有必要用到标签嵌套，以及使用变量等。（一开始是因为没有实践编写过sass，想着编码掌握，结果本末倒置，适得其反。）

解决方案：

A、直接复制原来预处理后的css代码至sass文件，再按照层级进行类嵌套等处理。

B、直接添加一个reset样式文件，将需要修改的地方，直接修改覆盖原有样式。

C、直接重构代码。有些代码写得实在混乱，掌握一定知识后，重构反而比修改原有混乱代码容易。因为本身代码就不规范，设计上就不太合理，自然不便修改。另外由于混乱，还得重新理解原有代码。

3）代码冗余等不够优化代码。

A、复用度高的颜色，单位等。

解决方案：可以抽象出来一个变量。然后引用，这样便于阅读和维护。

PS：做好这个前提是，在写页面之前就已经理解页面之间各个样式的关系，如布局，相同颜色值，相同尺寸，尺寸是外层容器尺寸的一半等。

B、相同样式块重复编写。

如：有些内容块的颜色，尺寸，左右间距等都相同。

解决方案：可以sass的继承实现，@extend；

C、复杂代码可以找出对应关系简化，事先未处理好。

如：需要编写多浏览器的样式，设置几个样式类似，只是个别值差别等。就可以用混合宏mixin抽象。这样代码更精简，便于阅读维护。

解决方案：需要养成良好的编码习惯。在不断编码，修改，总结中慢慢熟练掌握。同时需要提升基本功：html，sass，css的熟练程度，灵活应用程度。

四、收获

1.修改任务真是个费时费力费脑经的事情，所以以后做项目一定要在一开始就尽可能规划好，编写好规范代码。

2.一定要规范命名，规范编码，这样才便于阅读和维护。

3.模块化，组件化编程相当重要。优势不赘述。

五、PS

1.原计划昨天开始js任务的。结果发现修改自己代码也是劳心劳力的活。

2.那就好好修改吧。改得有多痛苦，记得才有多深。才会长记性，以后规范编码。

3.修改代码正好也是很好总结知识点的方法。

4.最后再修改一天，实在改不完，暂且搁置。先把进度跟上，开始js任务