今天完成的事情

• # 学习css选择器优化的原理与方法;
• # 开始整理自己的重置样式表;
• # 原任务6在不使用bootstrap的前提下,制作导航及下拉菜单.

明天计划的事情

• # 优化HTML文档,尽量减少标签的嵌套深度和无语义标签的使用;
• # 提交任务12

遇到的问题

• # 问题一: 在使用sass嵌套功能对css样式表进行优化时,我疯狂地进行嵌套,sass文档主要留下来了三个规则集:header/main/footer;
• HTML文档的主体内容大部分在<main>标签内,嵌套后如图;(文档太长无法截下)
• 
  
• 
• 
  
• 反思 : 如此嵌套带来的好处是文档结构清晰,而且由于sass的嵌套规则是采取的后代选择器,减少了相当一部分的类名和类选择器,可除此之外呢?代码行数基本上是持平的,而且随着嵌套深度增加,影响了开发者的阅读体验,至少我回过头检查代码时,反而不如之前使用类选择器时来的方便,编译后的css文档部分截图.(如此以为相邻选择器不如类选择器直接有效)
• 
• 
  
• 
  
• 
  
• 
  

• 
  

收获

 # CSS选择器的优化:

原理: 浏览器读取你的选择器，遵循的原则是从选择器的右边到左边读取。换句话说，浏览器读取选择器的顺序是由右到左进行;

选择器的最后一部分，也就是选择器的最右边（在这个例子中就是div部分）部分被称为“关键选择器”，它将决定你的选择器的效率如何？是高还是低。那么如何让关键选择器更有效，性能化更高呢？主要把握一点“越具体的关键选择器，其性能越高”

大牛总结排序:

上面九种选择器的性能是从高到低排下来的，其中ID选择器的性能是最高，而伪类选择器的性能则是最底。

大牛总结提高css性能的方法:

思考 : 了解css选择器有性能的不同之后,得知要提高性能,要尽量使用指向更加明确的选择器,避免使用后代选择器,这与sass的嵌套规则是矛盾的.

# 着手准备自己的重置样式表:

有了这个初步的想法之后,随后去百度查找了相关资料;

传统的CSS Reset:

背景:因为早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。早期的CSS Reset的作用就是清除所有浏览器默认样式，让它一切归零！

暴露出的问题:

1\*{ margin:0; padding:0; }会带来性能问题;

2\使用通配符存在隐性问题;

3\过渡的标签重置等于画蛇添足;

4\过度的标签重置导致语义元素失效;

替代品 Normalize.css

特性:Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

对比Reset的优势:

1\保护有用的浏览器默认样式而不是完全去掉它们;

2\一般化的样式：为大部分HTML元素提供;

3\修复浏览器自身的bug并保证各浏览器的一致性;

4\优化CSS可用性：用一些小技巧;