今天完成的事情：

1、做好了任务13的禅道。

2、学习了css样式分离，如何对网站css进行架构，css重置样式。

明天计划的事情：

1、分析 重构任务7页面

遇到的问题：

‍‍‍‍虽然看了几篇关于对网站css进行架构的文章但是文章里面有很多地方没看懂，里面提到的reset.css和css样式库好像都有很多版本？怎么选择呢？

css重置和css reset是两个概念吗？‍‍‍‍

收获：

一、css reset

CSS Reset简单来讲就是根据我们自己编写页面的需求重新设置css属性

css reset主要是因为html标签在浏览器中都有各自的默认样式，在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性

为什么要重置css，这点要从浏览器出发，因为不同的浏览器对于html标签的解释各不相同，重置css可以使得html标签在各个浏览器下产生相同的表现效果

好处：方便设计师/程序员发挥，便于发现前端代码的遗漏

方案1

*{margin: 0;padding: 0;} —— 被摒弃的方案

原因：

一方面，*导致CSS渲染引擎在渲染CSS的时候，使用*遍历整个DOM 树，影响性能渲染性能。

另一方面，*的威力太大，统统重置，把很多没有必要的都重置了

方案2

reset.css

最先作者：Eric Meyer

目的：在各个浏览器达到统一的效果。

缺点：代码量多，很多用不到的代码，建议可以找到其中需要的挑出来用

方案3

Normalize.css

由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库，Bootstrap用的就是normalize.css。

很多人说reset.css太暴力了，normalize.css相对要温柔一些。normalize.css修复了不同浏览器常见的不一致，规范化常见的组件风格，保存有用的默认值。因此，选择用Normalize.css来取代其它的CSS Resets

更优的方案：

针对项目再写一个，参考这些方法，做进一步的优化，特别是做大项目的时候。

没有特殊要求下，用reset.css和normalize.css足以

----------------------------------------------------------

二 、css样式分离

CSS样式分离，我一般指的是“以单独的CSS文件将CSS样式分离出来”，此处的重用多针对不同页面的重用，就是说，一个样式文件，可以多个页面使用，这对于一些公共样式的重构是很有用的。当然，对于一些重要的页面，例如淘宝首页，直接将CSS嵌在了页面头部，其降低链接请求的重要性要大于样式的重用

构成的基本元素越是独立，越是最简，其组合的可能性，元素的利用率越是高！”，CSS样式越是分离，其样式的利用率和覆盖率就越高，CSS代码就越精简

分离的终极目的在于精简这个网站的CSS文件，将整个网站的CSS文件只精简至一个

--------------------------------------------------------

三、良好的CSS架构目标

可预测

可预测意味着可以像预期的那样规范自己的行为。当你添加或者修改某个规则时,它并不会影响到没有指定的部分。对于一个小网站来说,一些微乎其微的改变并不算什么。而对于拥有成千上万个页面的大网站来说,可预测却是必须的。

可重用

CSS规则应具备抽象和解耦性,这样你就可以在现有的基础上快速构建新的组件,无需重新修改编码模式。

可维护

当把新组件放置到网站上,并且执行添加、修改或者重新设计操作时,无需重构现有CSS,并且新添加的X并不会打破原有页面的Y组件。

可扩展

当网站发展到一定规模后,都需要进行维护和扩展。可扩展的CSS意味着网站的CSS架构可以由个人或者团队轻易地管理,无需花费太多的学习成本。

常见的错误实践：

1、基于父组件来修改组件。

2、过于复杂的选择器。

3、过于通用的类名。

4、一个规则做太多事