今天完成的事情：

提交任务12

学习代码规范

看了国内腾讯、百度、网易的前端代码规范，在命名方法、代码风格方面都做出要求，但是在一些细节方面存在差别，这可能是在编码过程中形成的风格。

学习样式分离

这个还没有较为统一的形式，主要是两个方面的问题：1 选择器命名，避免污染；2 css文件的分割

明天计划的事情：

完成首页

遇到的问题：

对于样式分离应该遵循什么样的规则？

不同的人、不同的项目有不同的要求，自己先尝试一下吧。

收获：

这个任务提到css架构，看了一些文章不是太明白，站在页面整体的角度预先进行规划。

html和css语法相对宽松，即使错误也不会报错，但是不影响运行。这种性质需要规范做出限制，还有保证合理性，代码的可读性和以后可维护性。

任务13

开始时间：5.17

预计结束时间：5.21

http://task.jnshu.com/zentao/project-task-629.html

任务12总结

任务名称：CSS=TASK12

成果链接：https://chenzl90.github.io/demo-jnshu/task12/index.html

任务耗时：5.14-5.17 3天

技能脑图：

官方脑图

任务总结：

1. 1. 任务进度符合预期
   2. 脑图对比分析
      代码规范有了一定了解，并且在任务中尽量遵守，保持相同的风格。
      尝试了less其它的语法，体验到less的便利
   3. 任务中遇到哪些疑难问题，最终是如何解决的，有哪些值得分享的收获
      （对于任务总结应该更多的描述出任务所走的弯路以及遇到的困难，不应鼓励将知识点无脑的堆砌在总结之中）
      这个任务是之前的重构，把代码调整到更符合代码规范，用css翻译成less
      

      为了体验less中mixin的判断，对于header、footer的fixed设置部分做成mixin复用没有成功。这两部分只有top、bottom的差别，把它俩做成变量选择，但是变量只能进行数值赋值。

      反复看教程之后发现可以做到，只有把top、bottom当作关键字就可以。

      less
      .fixed(@z-index:1) {
      position: fixed;
      z-index: @z-index;
      }

      
      
      .mixin(top) {  top: 0;}
      .mixin(bottom) { bottom: 0;}
      .mixin(@_ ) {.fixed;}
      
      header {
      @switch: top;
      .mixin(@switch);
      }
      footer {
      @switch: bottom;
      .mixin(@switch);
      }

      编译后
      header {
      top: 0;
      position: fixed;
      z-index: 1;
      }
      footer {
      bottom: 0;
      position: fixed;
      z-index: 1;
      }