今天完成的事情

修复任务十二bug

完成任务十三侧滑栏

明天计划的事情： 继续修复任务十二bug

完成任务十三

遇到的问题：

#设置最大宽度后图标错位，

解决办法：由绝对定位改为相对定位即可，

#图标使用相对定位，占据文档流，形成空白空间，

解决办法：改用伪元素

任务十二深度思考

1.开发过程中应该遵守哪些编码规范和class命名规范？ 编码规范：

前端开发编码核心思想

表现、内容和行为的分离

标记应该是结构良好、语义正确 以及 普遍合法 。

Javascript应该起到渐进式增强用户体验的作用 。

通过保持代码风格和传统的一致性，我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险。而通过遵照最佳实践，我们能确保优化的页面加载、性能以及可维护的代码。

CSS命名规范

BEM 命名 BEM 是一种真正消除不确定性的命名方式，它使得结构样式更加清晰，我们有足够的信心做任何修改。

block：模块，名字单词间用 - 连接 element：元素，模块的子元素，以 __ 与 block 连接 modifier：修饰，模块的变体，定义特殊模块，以 -- 与 block 连接

这样命名的好处：

语义化，此处的语义化不是指 html 标签的语义化，对 SEO 可能也没有任何意义，但是这是一种人阅读的语义化。语义化的重要意义：宁可增加 html 大小，力图使维护变得轻松。 减少层层嵌套，有利于渲染效率。

BEM 导致 CSS 规则重用性降低，如果重用尽量考虑写成通用模块.

基本：以英文单词命名，避免无意义的缩写，以 - 连接。 我在一开始使用 BEM 的时候，也有很多疑惑，而且现在也不确定它完备的用法。 BEM 不是万能的，但是无论如何 BEM 是应该使用的方法。 命名空间给 CSS 命名提供更多信息。 定义模块提高代码的重用。 CSS 命名要求：语义化易于理解，可重用性高，后期维护容易，加载渲染快。

任务十三深度思考

1.如何做默认样式重置？

引入reset.css重置样式，清除浏览器默认样式，并配置适合设计的基础样式（强调文本是否大多是粗体、主文字色，主链接色，主字体等）。

2.resetting 和 normalizing 之间有什么区别？

normalize.css 根据官网的定义： normalize.css是一个现代的，为HTML5准备的reset.css的替代品。它可以使元素的渲染在多个浏览器下都能保持一致并且符合规范。它所瞄准的，也都是些需要规范化的样式。

可以通过npm的方式将normalize.css引入到你的项目中。

npm install normalize.css

Normalize.css的目标

保留有用的浏览器默认样式，而不是一概将它们“抹杀”。

normalize.css作用在范围更广的元素上面。

修正了一些bug及主流浏览器在渲染上的不一致。

提高了可用性。

用更加详细的文档及注释来解释代码的含义。

normalize.css支持更多的浏览器（包括手机端），同样也包括规范的HTML5元素，排版，列表，内嵌内容（embed），表单及表格的css。

reset是革命党，normalize是改良派。

normalize VS reset

normalize.css保存了部分可用的默认样式 reset.css为几乎所有元素统一了样式风格，但normalize保存了一些有用的默认样式，这样你就不用再对一些公共的排版元素重新声明样式。比如ul元素的margin。

normalize.css修复了一些bug

normalize修复了一些常见的PC端及移动端的bug，这往往超出了reset的能力范围，这里包括了HTML5元素的显示设置，修正了预格式化文本的字体问题，在IE9上的SVG overflow 问题以及不同浏览器和操作系统与表单之间的问题。

normalize.css不会使你的调试工具混乱

在页面中调试样式的时候，如果使用了reset.css，在样式调试区域就会出现大量的继承属性链，但normalize.css并不会出现这个问题，因为它的样式规则使用的是具有针对性的样式及相对保守的使用多重选择器。

normalize.css可以模块化

normalize 可以被分成多个独立的部分，也就是说你可以指定你自己需要的默认样式，同时，你的项目不需要哪些样式，可以对其进行删除。

normalize提供了大量的文档

normalize的代码基于非常细致的跨浏览器的研究和系统的测试，在 https://github.com/necolas/normalize.css 上面提供了详细的注释，这样你就能知道每行代码做了什么，为啥它会被包含进来，以及浏览器之间的差异，还有就是更容易你自己去进行测试。

收获：对以前的代码进行重构，发现了之前的不足之处，加深了对网页布局，css编码规范的理解.增强了sass的使用熟练度