css 优化

随着项目规模的增加，项目中的CSS代码也会越来越多，如果没有及时对CSS代码进行维护，CSS代码不断会越来越多。我们写CSS代码时，不仅仅只是完成页面设计的效果，还应该让CSS代码易于管理，维护。

我们对CSS代码优化主要有两个目的：

1、提高代码性能

2、提高代码的可维护性

优化主要分为：

1、图片优化
2、css代码优化
3、减少HTTP请求
4、HTML标签语义化

图片优化：
1、图片压缩
   ①存储为web所用格式
   ②使用压缩工具进行压缩，ps等
2、选择正确的图片格式
3、加上高度和宽度
4、ALT-代替属性

CSS代码优化：
一、CSS代码优化作用与意义：
        1、减少占用网页字节。在同等条件下缩短浏览器下载CSS代码时间，相当于加快网页打开速度
        2、便于维护。简化和标准化CSS代码让CSS代码减少，便于日后维护
        3、让自己写的CSS代码更加专业。
（整理和优化代码不仅是为了减小css文件，还包括了维护性和可读性以及提升css渲染速度。）

二、CSS代码优化方法：
（1）缩减代码
        1、代码简写。
        2、提取共用 css选择器：可在最后整合。
        3、排列代码，不要每个属性都独占一行，少用回车和空格。
        4、减少注释内容。注释中不使用汉字。
（2）增强维护性和可读性。
        1、命名规范。：功能命名
        2、合适注释（不能出现汉字）
        3、条理化代码：css代码整理归类。如头部内容与中间内容隔开，方便以后维护。上中下，代码排列按顺序。
        4、Css属性的顺序：以字母顺序写属性。
（3）提高渲染速度
       1、不要使用低效率的选择器：*{}#zishu*{} 或者指定标签
       2、不要使用滤镜
       3 、少用绝对定位
       4、平铺的背景图片尽可能大一些
       5、让属性尽量多的去继承
       6、不要放置空的或者没有的class在html中


减少HTTP请求
1、一个网站中，每个页面对应一个css文件？
对于大站，为了规范和方便后期维护可以将一些常用属性设置放置在一个css文件，将页面结构内容放在一个css文件中，如（main.css、style.css）但是对于中小型网站来说，一个css文件就足够了。
2、Css sprite（ css精灵或称css雪碧）
通过将网页中用到的所有背景图片（或所有不需要做链接的图片）置于一张图片之上。通过css的背景中background-position属性来定位。注意平铺的背景图片与不平铺的要分别集合到不同的图片上。


Html结构语义化标签的使用
1、避免使用不合理的html元素。
类似<font>标签或者无意义的元素比如<br />或者使用 实现留白等来冒充一个貌似合理但实际上不能使用的结构
“根据元素的含义使用元素，而不是因为它们看起来像什么。”结构元素应该只用于传达结构，而不要强制用于表现。
2、避免标记中的常见错误
classitis：代码标记的margin(即每个标签中都引用class)
divtis:当使用div来替换那些完好的（或者更适当的）元素的时候，divtis就出现了。


对网站的文件和资源进行优化
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用