今天完成的事情：

今天主要是把架构方面的知识给看了下， 发现各有千秋，提一下关于通过样式分离提高了代码重用性，其css样式库如下：

1.网站常见颜色，尤其是链接色

2网站常见背景色（我习惯用bg+颜色前2字母表示，例如.bgf7表示background:#f7f7f7）

3. 网站常见边框色，这里类似于CSS 通用库中的margin属性，需拆分，例如.bbdd表示border-bottom:1px solid #ddd;每人的命名习惯不一样，但是尽量简单为好，甚至您可以像Google一样，直接两个字母（大小写混搭）表示。另外，一定要告知设计师，边框取色不宜多，不能凭感觉，要有所牺牲，也就是如果之前使用了#cecece的边框色，后面的#d0d0d0颜色与之相近，请可以使用#cecece代替，用户是看不出来其中差异的。

4. 网站遗留的单margin属性，例如，某一div留白较大，有个单独的margin-top:35px的属性，OK，这个属性请放在网站CSS样式库中，以.mt35{margin-top:35px;}保留，以供之后类似布局或需要的地方使用。

5.网站遗留的单padding属性，例如，双栏自适应布局时，无论是浮动自适应，还是绝对定位自适应，都需要使用padding-left值，此时的padding-left多单样式，可抽取出来，以网站样式库的形式存在。记住，是单属性，且不可从通用元素中抽取单独的padding值，否则是给自己挖火坑。

6.网站已有的width属性，在流体布局思想下，宽度是有限的，是珍贵的，需好好利用。

7.网站常用的一些height属性，指一些高度值，例如height:18px，height:20px，height:24px，height:50px，height:100px，height:200px等。

不过原子类还是有些缺点：

      第一是稍微复杂点的样式都要使用很多class组合。

      第二是如果要修改样式的时候得修改html文件，而不是css样式，而纯静态的页面是很少的，所以如果是前后端分离的，由php或后端语言渲染页面的话，改个样式还要通知后端去修改文件，那估计人家得疯掉。

前端组件化有4个原则：

• 标准性

  任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。

• 组合性

  组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。

• 重用性

  任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。

• 可维护性

  任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。

css之提高渲染性能的写法

1.不要使用*{} 类似的通配符

        这种方法虽然写起来简单，但是渲染起来，浏览器引擎要遍历所有的标签，很影响效率。为了对浏览器友好，可以把自己经常用的标签进行重置操作。

2.css选择器的嵌套不要太多

        绝对没有比用后代选择器更改糟糕的做法了，因为浏览器读取css选择器有一个很重要的原则，那就是从右到左读取。所以尽量避免使用后代选择器，要去除不必要的祖先元素，可以考虑使用类选择器来替换后代选择器

3.不要在样式表中书写不存在的class

4.尽量少用绝对定位

         虽然绝对定位可以很简洁的实现很棒的效果，但是由于浏览器的渲染机制，网页中如果用过多的绝对定位，会让网页加载速度变得很慢。

5.让属性尽可能多的去继承，而不是覆盖。

6.尽量不去用滤镜

          滤镜的使用不仅存在浏览器兼容的问题，还很耗费资源。如果一定要达到滤镜的效果，可以考虑用图片去实现

7.避免使用css表达式

        css表达式尽在ie浏览器下才起作用，ie8后不推荐使用，因为他会严重影响页面性能。任何时候，不管任何一个事件被触发，例如窗口的resize事件，鼠标的移动等等，css表达式都会重新计算一遍。

8.把css文件放在页面顶部

       把外联或内联样式表放在body部分会影响页面渲染的速度，因为浏览器只有在所有样式表下载完成后才会继续下载其他页面内容。另外内联样式表有可能会引起页面重新渲染或显示隐藏页面中的某些元素，所以建议使用外联样式表，不要使用内联样式表

9.页面头部表名文档编码

        html文档是以包含文档编码信息的数据流方式在网络间传输。页面的编码信息一般会在http对应的头部信息或在文档内的html标记中指明。客户浏览器只有在确定的页面编码后才能正确的渲染页面，所以在绘制页面前，大部分浏览器会缓冲一定字节的数据来从中寻找编码信息。不同的浏览器预缓冲的字节数是不一样的，如果浏览器接收到了设定的预缓冲数据量信息后还没有找到页面的编码信息，便会根据各自制定的默认编码渲染页面。如果此时再获取到页面编码信息，和现在所用的不一致，那么整个页面就得重新渲染，使渲染速度大大降低。所以要习惯指定编码信息，而且给页面指定的编码要符合页面实际编码；如果在http头部和html标记中同时指定了编码，需要保证编码信息一致

具体网址：https://blog.csdn.net/foreverlove_lyf/article/details/51135971

明天计划的事情：

尝试用一些好的方法试试看，架构下。顺便看看纯css轮播图的做法，可能下个任务会完成吧

遇到的问题：

如果要搞个原子类的通用样式库，要记住一个原则：网站通用的元素（按钮，导航，选项卡的）的样式千万不能分离作为网站的CSS样式库。

理由很简单，这些模块的样式既然是通用的，如果你在这些通用模块中分离了样式，做成原子类，那么中途如有更改且应用到好几个页面的话，由于不同步的原因，所以自己还得一个一个的去找这些通用模块所在的原子类进行修改，这样增加了负担

其实可以用sass/less中的混合器或sass的%占位符来代替通用样式库的原子类。

通过这个这些原子类想到，与其把这些原子类样式库直接写进html上还不如转向css样式表的应用上面，也就是原子类只应用在样式表内，只在html里用表示语义的class跟id，通过用sass的混合器，占位符之类的，或许有些好处吧，不过这个sass生成后的css表估计还是有不少冗余。
在css文件管理上，可以把相关的架构sass放在一起，主要的sass表用来写入这些架构文件。维护的时候可以直接看sass文件。而且一些架构可以按需导入之类的

收获：

知道了一些css架构方面的知识。