今天完成的事情：

1.看了一些博客和文档，学习css样式分离，拆分公共样式表

2.拆分出了任务7的公共样式表

明天计划的事情：

1.继续任务13，用sass重写任务7各个页面的样式，争取明天完成任务13

遇到的问题：

1.看了一天文档，参考了几个师兄的样式拆分方法，感觉css样式分离没有一个规范可寻，只有一些常用的方法，而且需要根据实际情况拆分，不然容易适得其反，初衷是希望css样式通过拆分后能明朗简化，但胡乱拆分的话反而会使结构变复杂。比如颜色的拆分，由于任务7三个页面的颜色很多，复用性不强，如果还是将所有颜色集中拆到全局样式的话会比较混乱，所以我感觉样式拆分的原则应该是把复用性放在首位，将三个页面复用很多的属性或者代码片段集中拆分到全局样式，这样才能达到简化的效果。除此之外，页面默认样式重置也应放在全局样式。

收获：

1.通过今天的学习和思考，我总结出一些全局样式拆分方法（使用sass）：

（1）页面样式重置：

去掉一些标签的默认样式，比如body，p，h1，ul的margin和padding，a的下划线等等

（2）flex布局样式：

flex布局基本是复用最多的，特别是垂直居中，水平居中。

（3）盒子的宽高：

盒子的宽高也是页面中经常需要定义的属性。

（4）字体样式：

字体样式定义在字体比较多的时候复用很多。

（5）头部和底部绝对定位样式：

这个用于header和footer的定位

（6）边框样式：

边框属性也是页面重用很多的属性，将多变的边框颜色设置为变量，其他设置为常量。

2.css样式分离

无论是CSS的分离还是js的分离，其主要作用之一就是精简与重用。

CSS本身就代表着精简与重用。例如我们可以设置一个如下的样式：

.example{color:red;}

所有想让文字显示红色的标签都可以应用这个样式，这比10年前使用font标签，将color样式写在font标签上（尤其标签多时）要精简很多代码，代码可读性也更佳。

我们的页面结构与表现是由CSS+HTML构成的，想想看，在CSS2中，总共有多少个属性，是很有限的。如果我们把CSS中的每个样式独立出来，作为最最基本的构成元素，就像基因中的碱基一样，那么，我们实际上、理论上要使用的CSS代码量是非常非常之少的，不会出现开心网一样高达81K大小的样式文件了。

如果CSS是碱基，那么理论上CSS文件大小仅仅是5个CSS属性的大小，如下：

A{a~~}

G{g~~}

C{c~~}

T{t~~}

U{u~~}

也就是说，最小的CSS文件不足50个字符大小。万物是相对，辩证的，CSS虽然理论上非常之小，但是，要实现同样的效果，HTML代码量就是非常庞大，于是可能会有类似下面的HTML代码：

<div><span class="A"></span><span class="A"></span><span class="G"></span><span class="A"></span><span class="G"></span><span class="A"></span><span class="G"></span><span class="C"></span><span class="C"></span><span class="C"></span><span class="A"></span><span class="T"></span><span class="T"></span><span class="A"></span><span class="G"></span>...</div>

一切都是权衡。

实际上，CSS有几十种不同的属性，撇开一些不定参数（例如宽度，高度，颜色值）的样式，CSS的基础构成也是非常有限的，例如下面截取的的一小段CSS库样式（命名仅供参考）：

.l{float:left;}.r{float:right;}.cl{clear:both;}

.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}

.tdl{text-decoration:underline;}.tdn,a.tdl:hover,a.tdn:hover{text-decoration:none;}

.b{font-weight:bold;}.n{font-weight:normal; font-style:normal;}

.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}

.fa{font-family:arial;}.ft{font-family:tahoma;}.fw{font-family:"微软雅黑"}.fs{font-family:'宋体';}

.rel{position:relative;}.abs{position:absolute;}.ovh{overflow:hidden;}

.dn{display:none;}.db{display:block;}.dib{display:inline-block;}.di{display:inline;}

.cur{cursor:pointer;}

所以，理论上讲，几乎一半的样式效果，只需要上面这点CSS代码就可以了，例如，我们需要设置一个字体为“微软雅黑”，粗体，inline-block水平，相对定位的样式，则代码如下：

<strong class="fw dib rel"></strong>

样式的独立拆分，使得各种效果可以自由组合，这是有别于一个class类覆盖多个CSS属性的做法的。样式的独立拆分，精简的CSS文件，每个样式的重用性可谓发挥到的最大，同时，页面的后期维护变得异常轻松，样式冲突的可能性也是非常低的。实际上的CSS独立样式库不仅仅是上面展示的，还包括常见颜色，常见margin于padding值，清除浮动属性等。

样式彻底分离的副作用：

理论而言，样式越是拆分的彻底，CSS代码越是精简，CSS代码的重用率以及单个页面CSS样式的覆盖率都会相当惊人。但是，物极必反，理论不能代表实践。如果我们把所有的CSS样式进行拆分。对于一些复杂的UI效果，例如圆角自适应的导航，则此处的HTML代码开销会非常之大，此时一味的样式再分离，会使得HTML代码变得很痛苦。

所以，我们需要权衡，何时分离，哪些要分离？样式精简与重用仅仅是通过分离吗。

上面的问题不是一句话能说清楚的，其中有点只可意会的味道，这需要经验，以及结合自己的那套CSS准则，布局思想等！

但是，可以肯定的是，所有样式都要分离显然是不行的，更加可以肯定的是，目前基本上所有的网站的样式的分离都是不够的，远远不够，CSS也是需要架构的，而没有架构这一意识，分离反而会出问题。

进度：css任务13

任务开始时间：2018.6.15

预计demo时间：2018.6.16

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-719.html